web-dev-qa-db-ja.com

Angular 2で「Angular Material coreテーマが見つかりませんでした」というエラーを修正する方法

私は、Angular2で実質的に新しく、Angular 2フロントエンドでプロジェクトを継承しました。コンソールで新しいAngular 4.0に切り替えた後、次のエラーが表示されます。

「compatibility.ts：221 Angular Materialコアテーマが見つかりませんでした。ほとんどのMaterialコンポーネントは期待どおりに動作しない可能性があります。詳細については、テーマガイドを参照してください。 https://material.angular.io/ガイド/テーマ "

Mdb.min.cssはapp/assets/cssフォルダーにあります。 package.jsonの仕様は次を示しています。

"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
...
"angular-bootstrap-md": "*"

エラーを修正する方法は？

cssangularangular-material2
7
Alex

グローバルcssまたはsassファイルにテーマをインポートする必要があります。

@import "~@angular/material/prebuilt-themes/Indigo-pink.css";

または、代わりにindex.htmlファイル：

<link href="node_modules/@angular/material/prebuilt-themes/Indigo-pink.css" rel="stylesheet">

テーマのドキュメント 既に述べたようにAngular Materialは以下のビルド済みテーマを提供します：

  • deeppurple-amber.css
  • Indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

これらのテーマのいずれかを含めるか、独自のカスタムテーマを作成する必要があります。

12
Philipp Kief

@importをstyles.cssに追加しても機能しません。テーマをangular.jsonに追加するとうまくいきませんでした

次の方法を使用して、デフォルトの角材テーマを上記の角材テーマのいずれかに置き換えることができます。

事前に作成された角材のテーマをstyles.cssファイルに直接含めることができます。

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

または、index.htmlファイルのheadタグ内に次を追加します。

<link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">

または、angle.jsonファイルで次を更新します。

"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
},
"src/styles.css"
],
1
Masoud Bimar

Srcフォルダーにあるstyles.cssまたはstyles.scssに以下のコードを挿入してください。

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

Prebuilt-themesフォルダーの下のcssを選択できます。

0
himanshu sharma