CODEWITHSUNDEEP
cssangularangular-material2
Alex
Alex

Reputation: 7521

How to fix the error “Could not find Angular Material core theme” in Angular 2?

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?

Upvotes: 7

Views: 24962

Answers (3)

himanshu sharma
himanshu sharma

Reputation: 101

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.

Upvotes: 0

Srividhya Seshadri
Srividhya Seshadri

Reputation: 1

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

Upvotes: 0

Philipp Kief
Philipp Kief

Reputation: 8613

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.

Upvotes: 16

Related Questions