Angular 9とMatToolbarのエラー解決

問題
Angular 9でMatToolbarを使用すると、エラーが発生することがあります。これは、Angular Ivyと呼ばれる新しいレンダリングエンジンとAngular Materialのバージョン互換性によるものです。

原因

• バージョン互換性
  一部のAngular Materialのバージョンは、Ivyと完全には互換性がない場合があります。特に、古いバージョンのAngular Materialを使用していると、MatToolbarなどのコンポーネントで問題が発生することがあります。
• Ivyレンダリングエンジン
  Angular 9ではデフォルトでIvyが使用されます。これは新しいレンダリングパイプラインで、従来のView Engineとは異なる動作をします。

解決方法

1. Angular Materialのバージョンを確認・更新
   

   • 最新のバージョンに更新することを推奨します。最新のバージョンは一般的にIvyとの互換性が向上しています。
   • npmを使用して更新できます：

     npm update @angular/material
     

2. Ivyレンダリングエンジンの設定
   

   • Ivyレンダリングエンジンを無効にすることもできます。ただし、これは推奨されません。新しい機能やパフォーマンスの向上を利用できなくなる可能性があります。
   • angular.jsonファイルのprojectsセクションで、ivyオプションをfalseに設定できます。

3. NgModuleのインポート
   

   • 必要なモジュールを正しくインポートしていることを確認してください。MatToolbarを使用するには、MatToolbarModuleをインポートする必要があります。
   • 例えば、app.module.tsで以下のようにインポートします：

import { MatToolbarModule } from '@angular/material/toolbar';

 @NgModule({
   imports: [
     // ...
     MatToolbarModule
   ],
   // ...
 })
 export class AppModul   e { }
 ```

1. コンポーネントのテンプレート
   
   • コンポーネントのテンプレートで、mat-toolbarタグを正しく使用していることを確認してください。
   • 例えば：

     <mat-toolbar>
       My Toolbar
     </mat-toolbar>
     

• エラーメッセージ
  エラーメッセージを注意深く読み、問題の原因を特定してください。エラーメッセージには、具体的な問題や解決方法に関するヒントが含まれている場合があります。
• ビルドプロセス
  ビルドプロセスが正しく設定されていることを確認してください。特に、Angular CLIのバージョンと設定が適切であることを確認してください。

エラー例

<mat-toolbar>
  My Toolbar
</mat-toolbar>

このコードをAngular 9のプロジェクトで使用すると、以下のようなエラーが発生する可能性があります：

Error: NG8001: 'mat-toolbar' is not a known element:
If 'mat-toolbar' is an Angular component, then verify that it is included in the '@Component.imports' of this componen   t.

1. npm update @angular/material
   

@NgModule({ imports: [ // ... MatToolbarModule ], // ... }) export class AppModule { }  

**正しいコード例:**

```typescript
// app.module.ts
import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
imports: [
 // ...
 MatToolbarModule
],
// ...
})
export class AppModule { }

// app.component.html
<mat-toolbar>
  My Toolbar
</mat-toolbar>

しかし、特定の状況や制約により、これらの方法が適用できない場合、以下のような代替アプローチを検討することができます：

Ivyレンダリングエンジンの一時的な無効化

• angular.jsonファイルの編集
  angular.jsonファイルのprojectsセクションで、ivyオプションをfalseに設定します。

  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "ivy": false
          }
        }
      }
    }
  }
  

カスタムコンポーネントの作成

Angularの古いバージョンを使用