问题
I am practically new in Angular2 and inherited the project with Angular 2 frontend. After switching to the new Angular 4.0 on console I see the error:
"compatibility.ts:221 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"
The mdb.min.css is in the app/assets/css folder. The specification in package.json shows the following:
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
...
"angular-bootstrap-md": "*"
How to fix the error?
回答1:
You have to import a theme into your global css or sass file:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
or alternatively include it in your index.html file:
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
As in the theming documentation already mentioned Angular Material provides the following pre-built themes:
- deeppurple-amber.css
- indigo-pink.css
- pink-bluegrey.css
- purple-green.css
You have to include one of these themes or you create your own custom theme.
回答2:
Adding @import to styles.css doesn't work for me, adding theme to angular.json did the trick
You can replace the default angular-material-theme with one of the above-mentioned angular-material-themes using the following ways.
You can directly include the pre-built angular-material-theme in the styles.css file.
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
Or Add the following inside the head tag of index.html file.
<link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">
Or Update the following in angular.json file.
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
},
"src/styles.css"
],
回答3:
I had same issue when i upgraded from Angular version 7 to 8.Even after imported to .sass file / index.html / angular.json file.I tried upgrading angular material separately again , it solved the issue.
ng update @angular/material@latest
回答4:
Please insert below code into your styles.css or styles.scss which is located in your src folder.
@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
You can select any css under the prebuilt-themes folder.
来源：https://stackoverflow.com/questions/45761431/how-to-fix-the-error-could-not-find-angular-material-core-theme-in-angular-2