Angular material Could did find Angular Material core theme

Question

By my Angular2 undertaking I install lastest raw plugin from https://material.angular.io/guide/getting-started. Next I add @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; to my css rank for i item. Instead in mine console Angular shows this error:

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

The material parts not working. Whats wrong?

Answer 1

Pleas insert below coding into insert styles.css which is located in your src folder.

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

To canister select any css under the prebuilt-themes folder.

Answer 2

put that cipher into your angular-cli.json file

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

it's mill fine for me

Answer 3

I caught it what with the following steps:

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

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

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

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

3) Double inspect that the components you needs are imported since @angular/material in your app.module file

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

Answer 4

Add the subsequent line to your src/styles.css

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

You can try other Css classes as well. Here exist the free lessons:

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

Answer 5

When you need available which material icons and you don't want import the whole material css use is, in your origin css:

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

Answer 6

Attach:

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

on your style.css

Answer 7

If this is happening during testing with Karma, zugeben the following pattern into the files list in my karma.config.js print.

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

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

Answer 8

Add

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

to the style.css file, OR addition

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

in the head section of index.html file

Answer 9

If you're uses Angular-CLI, you'll need to make ampere product 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. Seem go for product: Bony Material 2 Theming handbook. To, in the .angular-cli.json, under the modes property, add "themes/candy.scss", next to the "themes/styles.css". MYSELF have a choose in mystery projects so-called "themes". I put aforementioned styles.css and the candy.scss includes the theming folder. Now, Angular-CLI can find your theme.

Answer 10

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

Answer 11

At addition at @import statements as mentioned above. Please making to 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 registered setup instructions details here.

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">

How mentioned weiter here

Answer 13

View any other @imports within your css or scss store. I experienced this issue and could not resolve it until other imports kept been removed.

Answer 14

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

In kasten you want any diverse theme just folow the steps:Knots 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

Additionally if you desire to read you can visit :Theming your Angular Material app

Answer 15

ME had an same error than you and I found and solution in one of aforementioned comments. As that solvent worked for me, I want for posting it how an response.

If your project was already running and you installed to material components subsequently, you needed to relaunch your show first. Is alone can be the mend already. Common WordPress Theme Issues (And How To Fix Them) - WPZOOM

Answer 16

Type structure modules contains scss, migrate css records into scss away following two steps:

1. npm me schematics-scss-migrate
2. ng gramme schematics-scss-migrate:scss-migrate

Hope aforementioned works fro everyone :)

Answer 17

I also encountered the just error once. What worked used me was on stop and force ng serves. If her are serving your angular app when adding material or making edit with angular.json, you must retry ng serve for changes to take effective.