Angular material Could not find Angular Material core theme

问题

In my Angular2 project I install lastest material plugin from https://material.angular.io/guide/getting-started. Next I add @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; to my css file for my component. But in my console Angular shows this error:

material.es5.js:148 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming`

The material components not working. Whats wrong?

回答1:

Please insert below code into your style.css which is located in your src folder.

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

You can select any css under the prebuilt-themes folder.

Shortened version:

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

回答2:

I got it working with the following steps:

1) Import this (or other) Material theme into your main css file:

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

2) Also make sure to register this main css file with the app.component file

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

3) Double check that the components you need are imported from @angular/material in your app.module file

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

回答3:

put that code into your angular-cli.json file

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

it's works fine for me

回答4:

If this is happening during testing with Karma, add the following pattern to the files list in your karma.config.js file.

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

For more detail see here: https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-including-core-theme-in-test-suite

回答5:

If you're using Angular-CLI, you'll need to make a reference to the themes file, e.g. "candy.scss" in the .angular-cli.json file. Look closely, do you have a *.scss? It's a Sass file. Look here for information: Angular Material 2 Theming instructions. So, in the .angular-cli.json, under the styles property, add "themes/candy.scss", next to the "themes/styles.css". I have a folder in my projects called "themes". I put the styles.css and the candy.scss in the themes folder. Now, Angular-CLI can find your theme.

回答6:

Add:

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

to your style.css

回答7:

Add the following line to your src/styles.css

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

You can try other Css classes as well. Here are the available classes:

@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';

回答8:

In addition to @import statements as mentioned above. Please ensure you add encapsulation: ViewEncapsulation.None inside @Component decorator.

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

If you are looking for Angular Material setup for .Net core 1.1 or 2.0 Angular SPA visual studio template. Please find the well documented setup instruction details here.

回答9:

worked for me adding in css section of index.html

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

As mentioned here here

回答10:

Check any other @imports in your css or scss file. I experienced this issue and could not resolve it until other imports had been removed.

回答11:

If you need only the material icons and you don't want import the whole material css use this, in your root css:

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

回答12:

Add @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to style.css of your angular project .

In case you want any other theme just folow the steps: Node modules -> @angular -> material -> prebuilt-themes ->

i)deeppurple-amber : @import "~@angular/material/prebuilt-themes/deeppurple-amber.css

ii)indigo-pink : @import "~@angular/material/prebuilt-themes/indigo-pink.css

iii)pink-bluegrey : @import "~@angular/material/prebuilt-themes/pink-bluegrey.css

iv)purple-green : @import "~@angular/material/prebuilt-themes/purple-green.css

And if you want to read you can visit :Theming your Angular Material app

来源：https://stackoverflow.com/questions/44230852/angular-material-could-not-find-angular-material-core-theme

标签

angular

themes