bug(theming): 'Could not find Angular Material core theme' warning with new Angular 18 application using Angular Material

[hunterbring]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When generating a new application and adding @angular/material with a custom theme, the following warning message is shown in the 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

However, the core mixin is present in the styles.scss file:

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;

// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the theme object.
$test-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: mat.$azure-palette,
    tertiary: mat.$blue-palette,
  ),
  density: (
    scale: 0,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
:root {
  @include mat.all-component-themes($test-theme);
}

// Comment out the line below if you want to use the pre-defined typography utility classes.
// For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
// @include mat.typography-hierarchy($test-theme);

// Comment out the line below if you want to use the deprecated `color` inputs.
// @include mat.color-variants-backwards-compatibility($test-theme);

/* You can add global styles to this file, and also import other style files */
html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

Attempting to include the core theme explicitly using @include mat.core-theme($test-theme) also has no effect.

Reproduction

StackBlitz link: N/A (StackBlitz failed to run newly generated Angular 18 application)

Steps to reproduce:

1. Generate a new application using ng new test-app
   • Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/rerendering)?
     • No
2. Add Angular Material to the project using ng add @angular/material
   • Theme type
     • Custom
   • Set up global Angular Material typography styles?
     • Yes
   • Include the Angular animations module?
     • Include and enable animations
3. Replace the content of app.component.html with the following:

   <button mat-flat-button>
     Test
   </button>
   

4. Add an import for the MatButtonModule to the imports array in app.component.ts
5. Serve the application
6. Open the Developer Tools
7. View the console

Expected Behavior

No warning should be present.

Actual Behavior

The following warning is shown in the 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

The button added in the app.component.html renders as expected.

Environment

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 18.0.1
Node: 20.13.1
Package Manager: npm 10.5.2
OS: win32 x64

Angular: 18.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.1
@angular-devkit/build-angular   18.0.1
@angular-devkit/core            18.0.1
@angular-devkit/schematics      18.0.1
@angular/cli                    18.0.1
@schematics/angular             18.0.1
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

[ivorobioff]

I can confirm that I see the same warnings in the same environment

[crisbeto]

It'll be fixed by #29118.

[Raghu0701]

Hi @crisbeto I am using Angular 18.0.1 I tried the above steps but still I see the warning appearing in devtools. Can you please help solving this. PFB the codebase for the same

https://github.com/Raghu0701/angular-material-18-test

[crisbeto]

@Raghu0701 it looks like that project is on 18.0.0. You should update the package.json to be ^18.0.1 instead.

[Raghu0701]

@crisbeto Thanks for your reply. I tried updating the packages using ng update command but still I see the in devtools. Additionally when I tried assigning primary color to navbar it has no effect on browser.

have updated the code in the github repository

Am I missing anything here ? please help as I am new to angular 18

[comanescuadrian95]

@crisbeto I updated the angular material to the latest angular 18.0.2. Warning is still present.

[crisbeto]

@comanescuadrian95 can you check in your node_modules if it's actually 18.0.2? Also how are you including your theme?

For what it's worth, you can also disable the warning by providing this:

{
  provide: MATERIAL_SANITY_CHECKS,
  useValue: false
}