it-swarm-ja.com

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

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

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

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

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

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でのテスト中に発生した場合は、次のpatternkarma.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 '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

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

@import '[email protected]/material/prebuilt-themes/Indigo-pink.css';

@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

@import '[email protected]/material/prebuilt-themes/pink-bluegrey.css';

@import '[email protected]/material/prebuilt-themes/purple-green.css';

3
nPcomp

追加:

@import "[email protected]/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

素材のアイコンだけが必要で、素材の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