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?

If I recall correctly, this file is a SASS file (.scss), maybe you can try with that? — , May 28 '17 at 19:09
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. — , May 28 '17 at 19:15
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. — Jonathan, Jun 25 '18 at 01:48

codelovesme · Accepted Answer · 2021-10-30T12:01:27.373

242

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.

edited Oct 30 '21 at 12:01

answered Jun 08 '17 at 12:55

codelovesme

3,049
1
16
18

2

Just as @jelbourn mentioned at Issues [4739](https://github.com/angular/material2/issues/4739): Load prebuilt-themes in **Global** (styles.css), rather than in Component's **styleUrls**. – btpka3 Oct 30 '17 at 13:11
26

Use ~ for easier path to node modules. Example: @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; – BraveNinja Apr 20 '18 at 18:46
As @BraveNinja said, tilde "~" allows you to avoid issues with paths. See https://stackoverflow.com/a/39535907/877464 for a better explanation why. – caruso_g Jun 29 '18 at 12:59
why is this not handled by angular add @angular/material itself? – JFFIGK Oct 21 '18 at 00:41
1

@Trevor the link has become broken, that paragraph is not there anymore – Kirill G. Nov 02 '19 at 01:28
1

Updated link to docs: https://material.angular.io/guide/theming#using-a-pre-built-theme – Trevor Nov 02 '19 at 19:00

score 36 · Answer 2 · answered Jun 19 '18 at 11:17

36

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

answered Jun 19 '18 at 11:17

Mohammad Zeeshan

825
1
9
20

7

This is the real correct answer. Never use style.css for import other css. ALWAYS use angular.json file. – Sum_Pie Mar 20 '19 at 17:52
1

@Bluex why is this better? – Rocco Aug 13 '19 at 07:17
@Rocco because it’s like style css in-line.. it works but is not a good solution rather is the worst – Sum_Pie Aug 14 '19 at 08:49
6

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. – L. Theodore Obonye Oct 13 '20 at 16:53
The latest docs demand this approach ... https://material.angular.io/guide/theming#using-a-pre-built-theme – danday74 Sep 01 '21 at 16:27

score 19 · Answer 3 · answered Jul 26 '17 at 11:00

19

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

answered Jul 26 '17 at 11:00

cmcevoy

191
4

It saved my time. Thanks. – ArunDhwaj IIITH Feb 19 '18 at 09:48
not working because node_modules\@angular\material\_theming.scss is overriding – Yasar Arafath Jan 02 '20 at 11:00

score 9 · Answer 4 · answered Apr 15 '19 at 14:59

9

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

answered Apr 15 '19 at 14:59

nPcomp

8,637
2
54
49

not working because node_modules\@angular\material\_theming.scss is overriding – Yasar Arafath Jan 02 '20 at 10:59

score 6 · Answer 5 · edited Mar 07 '19 at 00:11

6

Add:

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

to your style.css

edited Mar 07 '19 at 00:11

grrigore

1,050
1
21
39

answered Nov 14 '17 at 12:55

pulkeet

127
1
2

score 4 · Answer 6 · answered Aug 20 '17 at 23:45

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

score 4 · Answer 7 · answered Feb 14 '19 at 09:24

4

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

answered Feb 14 '19 at 09:24

G.Vitelli

1,229
9
18

score 3 · Answer 8 · answered Aug 23 '17 at 22:50

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.

Venkatesh Muniyandi · Answer 9 · 2017-12-12T19:38:31.540

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.

score 3 · Answer 10 · edited Jun 04 '20 at 09:17

3

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

edited Jun 04 '20 at 09:17

Peyman Mohamadpour

17,954
24
89
100

answered Jun 04 '20 at 07:16

Vishnu Mehta

31
4

score 2 · Answer 11 · answered Jul 06 '20 at 12:16

2

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

answered Jul 06 '20 at 12:16

Deepak

2,660
2
8
23

score 0 · Answer 12 · answered Apr 20 '18 at 07:45

0

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

answered Apr 20 '18 at 07:45

naila naseem

577
3
12
21

score 0 · Answer 13 · answered Feb 12 '19 at 11:18

0

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.

answered Feb 12 '19 at 11:18

BenSimpsy

1

score 0 · Answer 14 · answered Aug 08 '19 at 15:58

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

score 0 · Answer 15 · answered Jan 15 '20 at 08: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.

score 0 · Answer 16 · edited Jun 19 '21 at 08:28

0

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

npm i schematics-scss-migrate
ng g schematics-scss-migrate:scss-migrate

Hope this works fro everyone :)

edited Jun 19 '21 at 08:28

Slava Rozhnev

9,510
6
23
39

answered Jun 19 '21 at 03:18

Neeraj Jha

1

score 0 · Answer 17 · answered Jun 10 '23 at 05:09

0

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.

answered Jun 10 '23 at 05:09

Harshal Patil

13
3

Angular material Could not find Angular Material core theme

17 Answers17

Linked