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

[patrikx3]

Hi! Ciao! How Are You???

Bug, feature request, or proposal:

Could not find Angular Material core theme, although all core @include mat-core(); is included. I got 6 themes, all working except the warning.

What is the expected behavior?

No warning.

What is the current behavior?

Warning.

What are the steps to reproduce?

git clone https://github.com/patrikx3/corifeus-app-web-pages.git
cd corifeus-app-web-pages
yarn install
grunt run

See.

What is the use-case or motivation for changing an existing behavior?

Themes.

Which versions of Angular, Material, OS, browsers are affected?

Current.

Is there anything else we should know?

Nope.

[fxck]

Yeah, I'm getting this as well.

[crisbeto]

We have a marker style that we check for on load. When are you loading your theme?

[patrikx3]

It is dynamic, based on a cookie.

[patrikx3]

but i think the mat-core is loading right away.
it is in a css. so instant i think.

[crisbeto]

I can see you loading the mixins in a few places, but I couldn't find any instances of the mat-core or angular-material-theme mixins being included anywhere.

[patrikx3]

https://github.com/patrikx3/corifeus-web-material.git
The styles are there.

[patrikx3]

https://github.com/patrikx3/corifeus-web-material/blob/master/src/scss/material/_all.scss

[patrikx3]

that is a componet.
and i include here:
https://github.com/patrikx3/corifeus-app-web-pages/blob/f734270fd15d263beb4930095a90d20b7165cb42/src/angular/layout/cory-layout.scss

[crisbeto]

Alright, then it's definitely an issue with Material checking too early. We probably can't anticipate when styles are loaded without a major performance hit, but we could add a flag to disable the warnings for advanced cases like this. What do you think @jelbourn?

[willshowell]

Being able to disable the warning might help with #4056 too

[jelbourn]

@crisbeto what if we just delay the check for a few seconds? That way it will still be visible to developers by the time they open the dev tools but should be enough time to load styles for initial view.

[crisbeto]

We could, but that can still be race condition-ey. We can do something like a 5s delay if we really want to be safe.

[jelbourn]

I'd be okay with that as a simple workaround

[Torqode]

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.

[crisbeto]

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.

[MikeInSwitzerland]

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.

[zhanglongqi]

@MikeInSwitzerland It works for me. Thanks.

[briancullinan]

How can I override the theme colors using scss and still include it before modules try to load and I get the Could not find Angular Material core theme error?

[briancullinan]

@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

[p3x-robot]

I don't get it. I still get the error.

@Component({
    selector: 'cory-web-material-test-layout',
    templateUrl: './layout.html',
    encapsulation: ViewEncapsulation.None
})

@import '@angular/material/theming';
@include mat-core();

No matter I do I get the warning, and with electron, it doesn't load the SCSS. :(

In the web it works. Ok, warning.
But, in Electron, something is fishy.

[briancullinan]

@patrikx3 I am not sure which loader supports importing SCSS directly in your typescript files but it's not the default angular one. Try using styleUrls: [] and moving your import code in to that, make sure you have a SCSS loader setup in web-config.

[p3x-robot]

Ciao!

How are you?
Thanks for looking at it. What do you mean not default angular? I tried AOT, JIT and the compiler with JIT at once, in the web works, though same warning though in dev.

I did as you said:

application.ts

@Component({
    selector: 'cory-home-app',
    template: `
    <div style="padding: 5px;">
        <router-outlet></router-outlet>
    </div>
  `,
    styleUrls: [
        './application.scss'
    ],
    encapsulation: ViewEncapsulation.None,
})
export class Application {
}

application.scss

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import '~@angular/material/theming';
@include mat-core();

It is a Material issue.

<md-icon class="mat-icon" role="img" aria-hidden="true">keyboard_arrow_right</md-icon>

it does not add for even the material classess

<md-icon class="mat-icon material-icons" role="img" aria-hidden="true">keyboard_arrow_right</md-icon>

Angular is working. The error is only in material issue, all Angular functions work.

[briancullinan]

I fixed this by then moving the import from styleUrls to angular-cli.json
Apps {[name:"my-app", styles: ["./main.theme.scss"]]} then the warning went
away.

On Jul 31, 2017 7:57 AM, "patrikx3" [e-mail] wrote:

Ciao!

How are you?
Thanks for looking at it. What do you mean not default angular? I tried
AOT, JIT and the compiler with JIT at once, in the web works, though same
warning though in dev.

I did as you said:

application.ts

@Component({
selector: 'cory-home-app',
template: <div style="padding: 5px;"> <router-outlet></router-outlet> </div>,
styleUrls: [
'./application.scss'
],
encapsulation: ViewEncapsulation.None,
})export class Application {
}

application.scss

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');@import url('https://fonts.googleapis.com/css?family=Roboto');@import '~@angular/material/theming';@include mat-core();

It is a Material issue.

keyboard_arrow_right

it does not add for even the material classess

keyboard_arrow_right

Angular is working. The error is only in material issue, all Angular
functions work.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/4125#issuecomment-319092518,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5XbqcwCa196xlLpisthxA115seyFGzks5sTetqgaJpZM4M_mN2
.

[p3x-robot]

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!

[sharpevo]

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

[siebmanb]

@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'
        ],

[vincecampanale]

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

[Vadorequest]

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.

[leoncc]

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.

[subramn]

Still i get this error with 5.0.0-rc.1. all components are getting displayed but the warning in the console keeps coming.

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

I followed all the "Get started" instructions. is there anything i am missing. I am using webpack instead of systemjs.

any thoughts

[briosheje]

Experiencing the same in 5.0.0-rc.1

Tried a tons of stuff, but nothing seems to allow my app to see the css file. Whatever, I'm likely downgrading to rc.0 if it somehow works for some strange reasons :P

Update: the error still appears in rc0.

[crisbeto]

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

[briosheje]

I've found a solution for electron.

Avoid including the file in the .scss files, include it in your vendor instead.

In a nutshell, include the file in a .ts file, ideally the vendor.ts file. This will properly include everything.

To make things clearer, in my case I had a app.style.scss file with:

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

I've removed this line and added in my vendor.ts file:

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

Also, I'm using webpack. The relevant part for CSS / scss is:

           {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['to-string-loader','raw-loader','sass-loader']
            },

[rhanb]

I found a quick fix to avoid this issue:

themes.scss

@import '~@angular/material/theming';
@include mat-core();
// all custom themes imports below
@import './matooma-theme';
@import './yellow-mars-theme';

// all custom themes includes
// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.matooma-theme {
  @include angular-material-theme($matooma-theme);
}

.yellow-mars-theme {
  @include angular-material-theme($yellow-mars-theme);
}

style.scss

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

@import "./style/themes";

Just add a default angular material import in your style.scss. Not the best solution but works, no warning and no transparency on modals.

[aryaroudi]

if I don´t want to use the material thems and use my own, how can I hide this message?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}