Angular material Could not find Angular Material core theme

Question

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?

Talkington

If I recall correctly, this file is a SASS file (.scss), maybe you can try with that? – Antipyrine

I don't have any sass file – Talkington

No, you don't have sass files, but the angular material module does. That's how you use your own theme (again, if I recall correctly), so try seeing in the node module if it's a SASS or css file. – Antipyrine

If you're working on a custom theming project, and you added a file to your "angular.json" file, make sure you stop the ng serve and restart it for the new "theme.scss" to load. – Actin

Answer 1

Please insert below code into your styles.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.

Anywise

Just as @jelbourn mentioned at Issues 4739: Load prebuilt-themes in Global (styles.css), rather than in Component's styleUrls. – Pilpul

Use ~ for easier path to node modules. Example: @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; – Alphanumeric

As @Alphanumeric said, tilde "~" allows you to avoid issues with paths. See https://mcmap.net/q/101104/-what-does-a-tilde-in-a-css-url-do for a better explanation why. – Mayramays

why is this not handled by angular add @angular/material itself? – Ruffina

@Trevor the link has become broken, that paragraph is not there anymore – Hettie

Updated link to docs: material.angular.io/guide/theming#using-a-pre-built-theme – Parik

Answer 2

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

Facture

This is the real correct answer. Never use style.css for import other css. ALWAYS use angular.json file. – Phionna

@Bluex why is this better? – Canaveral

@Canaveral because it’s like style css in-line.. it works but is not a good solution rather is the worst – Phionna

This is the best answer. If you get this error with later versions 9+ after running ng add @angular/material just terminate the batch job and re-run the app, sometimes the configs aren't fully loaded when compiling. – Celom

The latest docs demand this approach ... material.angular.io/guide/theming#using-a-pre-built-theme – Coronagraph

Answer 3

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

Preclinical

not working because node_modules\@angular\material_theming.scss is overriding – Hectometer

Answer 4

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

Gobioid

not working because node_modules\@angular\material_theming.scss is overriding – Hectometer

Answer 5

Add:

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

to your style.css

Phoebephoebus

Answer 6

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

Easley

Answer 7

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

Remarque

Answer 8

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

Grocer

Answer 9

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.

Amylolysis

Answer 10

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

Antiquated

Answer 11

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.

Oversize

Answer 12

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

Jovita

Answer 13

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.

Phyliciaphylis

Answer 14

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

Latimore

Answer 15

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.

Gaughan

Answer 16

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 :)

Proceed

Answer 17

I also encountered the same error once. What worked for me was to stop and restart ng serve. If you are serving your angular app when adding material or making changes in angular.json, you must restart ng serve for changes to take effect.

Enriquetaenriquez

Answer 18

If you import like this import { MatTableDataSource, MatTableModule } from '@angular/material/table';

But you don't use one of them. Delete it, error solved.

FOREXAMPLE:

From

import { MatTableDataSource, MatTableModule } from '@angular/material/table';

TO

import { MatTableModule } from '@angular/material/table';

Abbotsun