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 #4125
Comments
|
Yeah, I'm getting this as well. |
|
We have a marker style that we check for on load. When are you loading your theme? |
|
It is dynamic, based on a cookie. |
|
but i think the mat-core is loading right away. |
|
I can see you loading the mixins in a few places, but I couldn't find any instances of the |
|
https://github.com/patrikx3/corifeus-web-material.git |
|
that is a componet. |
|
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? |
|
Being able to disable the warning might help with #4056 too |
|
@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. |
|
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. |
|
I'd be okay with that as a simple workaround |
|
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 Personally, the idea of tweaking timers to do css checks feels a bit hacky. |
|
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. |
kara
added
the
P3
Delays the sanity checks from the `CompatibilityModule` by 5 seconds, in order to give the user's base styles a better chance to load. Fixes angular#4125.
Delays the sanity checks from the `CompatibilityModule` by 5 seconds, in order to give the user's base styles a better chance to load. Fixes angular#4125.
Delays the sanity checks from the `CompatibilityModule` by 5 seconds, in order to give the user's base styles a better chance to load. Fixes angular#4125.
Allows users to disable the Material sanity checks, by providing a value for the `MATERIAL_SANITY_CHECKS` token: ```ts @NgModule({ providers: [ {provide: MATERIAL_SANITY_CHECKS, useValue: false} ] // other config }); ``` Fixes angular#4125.
|
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. |
|
@MikeInSwitzerland It works for me. Thanks. |
|
How can I override the theme colors using scss and still include it before modules try to load and I get the |
|
@crisbeto GREAT! Your documentation does describe each directive such as Now, where do I refer to theme.scss so that it is compiled and included in the page before receiving the error 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 NOPE! That's not going to work! Where do I put theme.scss so that it is compiled? Maybe angular-cli.json? NO, that doesn't work because it doesn't compile scss, it just inserts css into the head of index.html. In my app.component.ts? NO! That only works with awesome-typescript-loader and webpack, doesn't work with angular-cli? How about using 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? @willshowell Provides a great example of a use case with linking multiple |
|
I don't get it. I still get the error. No matter I do I get the warning, and with In the web it works. Ok, warning. |
|
@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 |
|
Ciao! How are you? 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. |
|
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" ***@***.***> 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 ***@***.*** ***@***.*** ***@***.******@***.*** 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.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#4125 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AX5XbqcwCa196xlLpisthxA115seyFGzks5sTetqgaJpZM4M_mN2>
.
|
|
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!!!! Thanks guys so much! |
|
It seems that none of the above solutions works for me. After tons of tests with
Finally, the config is: and the dependencies in package.json are: |
ghost
mentioned this issue
|
@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 |
|
Okay, my mistake was the following:
I put this line in |
|
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 : or this: worked for me on @angular/cdk 5.0.0-rc0. |
|
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 |
|
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. |
|
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 import {MATERIAL_SANITY_CHECKS} from '@angular/material/core';
@NgModule({
providers: [{provide: MATERIAL_SANITY_CHECKS, useValue: false}]
})
export class YourModule {} |
|
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 To make things clearer, in my case I had a
I've removed this line and added in my
Also, I'm using webpack. The relevant part for CSS / scss is: |
|
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 |
|
if I don´t want to use the material thems and use my own, how can I hide this message? |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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 runSee.
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.
The text was updated successfully, but these errors were encountered: