Angular material Could not find Angular Material core theme

user_1791812 0
Viewed 114586

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?

angular themes
16 Answers

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

user_86256870

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

user_50749730

Add:

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

to your style.css

user_81196850

Add

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

to the style.css file, OR add

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

in the head section of index.html file

user_120470620

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;
}
user_87573500

I don't know how many may find this useful, but restarting ng server worked after trying different solutions from Stack overflow.

user_104039020

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

user_77087500

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.

user_110504160

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

user_102420680

I had the same error as you and I found the solution in one of the comments. Since that solution worked for me, I want to post it as an answer.

If your project was already running and you installed your material components afterwards, you need to restart your project first. That alone can be the fix already.

Admin1

Material design modules contains scss, migrate css files into scss from following two steps:

  1. npm i schematics-scss-migrate
  2. ng g schematics-scss-migrate:scss-migrate

Hope this works fro everyone :)

user_122768600
Related