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

This issue tied me in knots, but eventually, I realised that what Angular’s own Materials tutorial doesn’t tell us is that we must include this line in the “styles.css” file, to make the controls appear normally (certainly in Windows 7).

@import “…/node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css”;

Trying to include that file using an “include”, even in the index.html file, failed miserably for me. It could never locate this .css file… even if I manually copied it into the same folder as index.html.

@sharpevo thanks a lot for your help. I had the issue when running tests using karma. Your fix does not work for this use case, however adding the theme file in karma.conf.js as follows fixes the issue

files: [
            {pattern: './src/test.ts', watched: false},
            'node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css'
        ],

Okay, my mistake was the following:

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

I put this line in src/app/app.component.css instead of src/styles.css.

It seems like the warning itself could be removed in favor of a clearer set of requirements in the documentation.

I may be missing some other reason for its existence, but it appears that the compatibility module is just checking to make sure you’ve put @include mat-core(); in your style. Couldn’t that requirement be made more obvious (e.g., bold) in the docs, rendering the warning redundant?

Personally, the idea of tweaking timers to do css checks feels a bit hacky.

That warning is a sanity check that won’t be done in production mode. If you want to disable it in development mode, you can use the MATERIAL_SANITY_CHECKS token:

import {MATERIAL_SANITY_CHECKS} from '@angular/material/core';

@NgModule({
  providers: [{provide: MATERIAL_SANITY_CHECKS, useValue: false}]
})
export class YourModule {}

@crisbeto GREAT! Your documentation does describe each directive such as mat-core and angular-material-theme. I GET THAT!!

Now, where do I refer to theme.scss so that it is compiled and included in the page before receiving the error Could not find Angular Material core theme. ?

Let me explain what we need answered in this thread. Lets say I have some basic css and the material theme color instructions all contained in theme.scss. Follow me so far? Do I put theme.scss in tsconfig? E.g.:

{
    "compilerOptions": {
        "styles": {
             "./theme.scss"
        }
    }
}

NOPE! That’s not going to work!

Where do I put theme.scss so that it is compiled? Maybe angular-cli.json?

{
    "apps": [
        {
            styles: [
                "./theme.scss"
            ]
        }
    ]
}

NO, that doesn’t work because it doesn’t compile scss, it just inserts css into the head of index.html. Error: Could not find Angular Material core theme

In my app.component.ts? https://github.com/ng-seed/universal/blob/master/src/client/app/app.component.ts

// external styles
import '../assets/sass/layout.scss';

NO! That only works with awesome-typescript-loader and webpack, doesn’t work with angular-cli?

How about using encapsulation: ViewEncapsulation.None in app.component.ts?

@Component({
    selector: 'bc-app',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [TranslateService, LayoutService],
    templateUrl: './app.component.html',
    styleUrls: ['./theme.scss', './app.component.scss'],
    encapsulation: ViewEncapsulation.None,
})

HEY THAT WORKS! Except we still get this error message even though everything looks correct.

Any ideas? Anyone? Does every theme have to start with a precompiled color in order to resolve this error? Do you start with a precompiled theme and then override the theme meaning it injects multiple themes in to your page?

What is the most up to date method for doing this and why isn’t it made clear on this page? https://material.angular.io/guide/theming

@willshowell Provides a great example of a use case with linking multiple .scss files together: https://github.com/angular/material2/issues/6063#issuecomment-318141302

Just to mention the file to edit where styles.css is configured is .angular-cli.json, not angular-cli.json. A hidden file on Unix OSes.

In src/styles.css, either this : @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

or this: @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

worked for me on @angular/cdk 5.0.0-rc0.

It seems that none of the above solutions works for me. After tons of tests with rm -rf node_modules and npm install , the result is really weird.

angular-cli.json	src/styles	result
“…/indigo-pink.css”	“…/indigo-pink.css”	fail
“…/indigo-pink.css”	“…/deeppurple-amber.css”	fail
“…/deeppurple-amber.css”	“…/deeppurple-amber.css”	fail
“…/deeppurple-amber.css”	“…/indigo-pink.css”	success

Finally, the config is:

# angular-cli.json

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

# src/styles.css

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

and the dependencies in package.json are:

  "dependencies": {
    "@angular/animations": "^4.3.5",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/flex-layout": "^2.0.0-beta.8",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "chart.js": "^2.5.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "material-design-icons": "^3.0.1",
    "ng2-charts": "^1.5.0",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.8.4"
  },

Ahh, if you have some something weird with Electron and Angular Material, make sure if you use ipcRenderer from Electron, make sure use it in the NgZone.run!!! Now it is fine, perfect. 1 month sadness!!!

Thanks guys so much!

For newcomers, @siebmanb’s solution also worked for me. Note that the absolute path should be used (e.g. node_modules/@angular/material/... instead of ../../node_modules/@angular/material/...). Thanks @siebmanb !!

We do have info about it in the docs @Torqode, however people tend to miss it, which ends up looking like it works in some cases, but breaks once you start using the overlay-based components. I’m not sure that making it bolder will solve the issue.