Embed a material core theme in styles.scss to remove warn "Could not find Angular Material core theme."

[JanOschii]

Hi Tomas,

I have had this message: Could not find Angular Material core theme. in my dev log.
I could solve it by adding
@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
after line 11 in styles.scss:

...
@import '../node_modules/@angular/material/theming';

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

@include mat-core();
...

Regards

Jan

[tomastrajan]

Hey @JanOschii !

Thank you for reporting the issue! I was aware of this and it was pretty harmless but I agree we are better of without weird warning in the console!

The issue was caused by the fact that the theme class was added to the main DOM container only after application already started. AppComponent subscribes to the store to retrieve theme class and apply it on the overlayContainer and main DOM container. This means app has to exist for some time before this happens without theme css.

The solution is to enable default theme by default by removing theme class around it usage in styles.scss. (feel free to check the commit) That way default theme is applied before app startup and the warning is removed.

Your proposed solution would work but increase the payload of application significantly because we would be shipping extra theme which would never be really used.

Cheers!