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

[hunterbring]

trafficstars

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