Search code examples
javascriptangulartypescriptangular-materialangular18

Could not find Angular Material core theme angular 18

I am new to angular 18 and I am trying to use the angular material for a simple application development.

When I am adding the @angular/material with theme as azure-blue I am facing below challenges

  1. Even though CLI output says it updated the styles.scss, I don't see any traces or updates happening in the styles.scss file
  2. When I tried setting up the custom theme (due to the above point), I am receiving below warning/error in the browser dev-tools console.

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 tried following the steps provided in the angular material official documentation

Angular Material Theming Guide

Additionally I also tried adding @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; to my styles.scss file and tried updating the path in angular.json but no luck so far

Can anyone please help me getting rid of these problems and setting up the angular material theme.

Solution

  • There has been an issue with placing the M3-loaded marker in version 18.0.0 of Angular Material Components. The issue has been resolved in version 18.0.1 of of the library. You can find the corresponding issue, release log and the corresponding fix on GitHub.

    Try to update @angular/material to version 18.0.1 to resolve your problem.