Angular 9 で MatToolbar エラーをデバッグ！ エラーメッセージから原因を特定
Angular 9 で MatToolbar を使用するときに発生するエラーの解決方法
Error: Can't resolve 'MatToolbar'
このエラーは、MatToolbarModule が正しく ngcc によって処理されていないか、Angular Ivy と互換性がないことを意味します。
この問題を解決するには、以下の方法を試してください。
Angular Material と ngcc を最新バージョンに更新する
npm install @angular/material @angular/cdk ngcc
node_modules フォルダを削除して再インストールする
古いバージョンの Angular Material や ngcc が問題の原因となっている可能性があるため、node_modules フォルダを削除して再インストールしてみてください。
rm -rf node_modules
npm install
MatToolbarModule 全体を読み込む
一部のコンポーネントのみをインポートする代わりに、MatToolbarModule 全体を読み込むことで問題が解決する場合があります。
import { MatToolbarModule } from '@angular/material/toolbar';
@NgModule({
imports: [
MatToolbarModule
],
declarations: [
AppComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
プロジェクトを AOT コンパイルする
AOT コンパイルを使用すると、ビルド時にすべてのコンポーネントとテンプレートが事前にコンパイルされるため、この問題が発生する可能性が低くなります。
ng build --prod
キャッシュをクリアする
ブラウザのキャッシュをクリアすると、問題が解決する場合があります。
これらの方法を試しても問題が解決しない場合は、Angular Material の GitHub リポジトリ で問題を報告してください。
<mat-toolbar color="primary">
<span>My App</span>
<span class="spacer"></span>
<button mat-icon-button>
<mat-icon>search</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>account_circle</mat-icon>
</button>
</mat-toolbar>
このコードは、以下の内容を作成します。
- 青色のツールバー
- ツールバーの左側に "My App" というテキスト
- ツールバーの右側にスペーサー
- 検索アイコン付きのボタン
- アカウントアイコン付きのボタン
コードの説明
<mat-toolbar>タグは、MatToolbar コンポーネントを定義します。color属性は、ツールバーの色を設定します。<span>タグは、ツールバー内のテキストコンテンツを定義します。
- タイトルを設定する
- ナビゲーションリンクを追加する
- ロゴを追加する
<mat-toolbar color="primary">
<img src="logo.png" alt="Logo">
<span>My App</span>
<a mat-button routerLink="/">Home</a>
<a mat-button routerLink="/about">About</a>
</mat-toolbar>
- ロゴと "My App" というテキストを含むツールバー
- "Home" と "About" へのナビゲーションリンク
リソース
TypeScript コンパイラーオプションを変更することで、MatToolbar エラーを解決できる場合があります。
"compilerOptions": {
"module": "esnext",
"target": "es2015",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"sourceMap": true,
"inlineSources": false,
"removeComments": false,
"preserveValueTrivia": false,
"allowSyntheticDefaultImports": true,
"typeRoots": [
"./node_modules/@types"
]
}
この設定は、以下のことを行います。
- モジュールシステムを "esnext" に設定します。
- ターゲット JavaScript ランタイムを "es2015" に設定します。
- 厳格なモードを有効にします。
- ES モジュールインターオペレーションを有効にします。
- ライブラリチェックをスキップします。
- 実験的なデコレータを有効にします。
- デコレータのメタデータを生成します。
- ソースマップを生成します。
- インラインソースを無効にします。
- コメントを削除しません。
- 値トリビアを保持しません。
- 合成デフォルトインポートを許可します。
- @types ディレクトリを型ルートとして設定します。
カスタムビルドスクリプトを使用する
カスタムビルドスクリプトを使用して、ngcc を手動で実行し、MatToolbarModule を AOT コンパイルすることができます。
npx ngc --build --prod --base-path src/app --output-path dist/app --define=BUILD_OPTIMIZATIONS
- ngcc をビルドモードで実行します。
- ソースディレクトリを "src/app" に設定します。
- BUILD_OPTIMIZATIONS 定義を有効にします。
別のツールを使用する
MatToolbar に代わる他のツールを使用することもできます。いくつかの人気のあるオプションは以下のとおりです。
これらのツールは、MatToolbar と同様の機能を提供していますが、独自の API と設定を持っています。
Angular チームにサポートを依頼する
上記の方法を試しても問題が解決しない場合は、Angular チームにサポートを依頼することができます。 で問題を報告してください。
注意事項
angular angular-material
