web-dev-qa-db-ja.com

Angular materialが見つかりませんでしたAngular Materialコアテーマ

私のAngular 2プロジェクトでは、 https://material.angular.io/guide/getting-started から最新のマテリアルプラグインをインストールします。次に、自分のコンポーネントのcssファイルに@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';を追加します。しかし私のコンソールではAngularはこのエラーを示しています：

material.es5.js：148 Angular Materialコアテーマが見つかりませんでした。ほとんどのマテリアルコンポーネントは期待通りに動作しないかもしれません。詳細については、テーマガイドを参照してください。 https://material.angular.io/guide/theming `

構成品目が機能していません。どうしましたか？

angularthemes
54
lukassz

srcフォルダにあるstyle.cssに以下のコードを挿入してください。

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

prebuilt-themesフォルダの下にある任意のCSSを選択できます。

111
codelovesme

私はそれが次のステップで動くようにしました：

1）この（または他の）MaterialテーマをメインのCSSファイルにインポートします。

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

2）また、このメインのcssファイルをapp.componentファイルに登録してください。

@Component({
  selector: 'app',
  styleUrls: [
    './app.component.css'
  ]
})

3）あなたが必要とするコンポーネントがあなたのapp.moduleファイルの@ angular/materialからインポートされていることを再確認してください。

import { MdCardModule, MdInputModule } from '@angular/material';
14
cmcevoy

そのコードをangular-cli.jsonファイルに入れます。

"styles": [
    "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
  ],

それは私のためにうまくいきます

11
Mohammad Zeeshan

Angular-CLIを使用している場合は、テーマファイルへの参照を作成する必要があります。 .angular-cli.jsonファイルの "candy.scss"よく見て、あなたは* .scssを持っていますか？ Sassファイルです。情報をここに見なさい： Angular Material 2テーマの指示 。そのため、.angular-cli.jsonのstylesプロパティの下に、 "themes/styles.css"の横に "themes/candy.scss"を追加します。私のプロジェクトには "themes"というフォルダがあります。私はstyles.cssとcandy.scssをthemesフォルダに置きます。これで、Angular-CLIはあなたのテーマを見つけることができます。

3
LargeDachshund

これがKarmaでのテスト中に発生した場合は、次のpatternをkarma.config.jsファイルのfilesリストに追加してください。

module.exports = function (config) {
   config.set({
    basePath: '',
    ...,
    files: [
        {pattern: './node_modules/@angular/material/prebuilt-themes/Indigo-pink.css', included: true, watched: true}
    ],
    ...
}

詳細についてはこちらを参照してください。 https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-including-core-themeテストスイート

3
The Aelfinn

次の行をあなたのsrc/styles.cssに追加してください。

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

他のCssクラスも試すことができます。利用可能なクラスは次のとおりです。

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

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

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

@import '~@angular/material/prebuilt-themes/purple-green.css';

3
nPcomp

追加：

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

あなたのstyle.cssへ

2
Pulkeet Katiyar

上記の@importステートメントに加えて。必ず@Componentデコレータの内側にViewEncapsulation.Noneを追加してください。

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None})

Angular .Net core 1.1または2.0用のマテリアルのセットアップAngular SPAビジュアルスタジオテンプレートを探している場合文書化されたセットアップ指示の詳細を見つけてください ここ 。

2
Venkatesh Muniyandi

素材のアイコンだけが必要で、素材のCSS全体をインポートしたくない場合は、ルートCSSでこれを使用します。

/** disable angular mat theme warning */
.mat-theme-loaded-marker {
  display: none;
}
0
G.Vitelli

あなたのcssまたはscssファイルの他の@importsをチェックしてください。私はこの問題を経験し、他の輸入品が取り除かれるまでそれを解決することができませんでした。

0
BenSimpsy

私のためにindex.htmlのcssセクションに追加

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

ここに述べたように ここ

0
naila naseem