Angular Material 18: mat.define-palette() causes "Undefined function" error

Question

After upgrading my Angular core libraries to version 18, I migrated to Angular Material 18 by running:

ng update @angular/material

The update went smoothly but when I tried to compile my app I got the following error:

X [ERROR] Undefined function.
   ╷
14 │ $myapp-theme-primary: mat.define-palette(mat.$indigo-palette, A400, A100, A700);
   │                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\styles.scss 14:23  root stylesheet [plugin angular-sass]

    angular:styles/global:styles:2:8:
      2 │ @import 'src/styles.scss';
        ╵         ~~~~~~~~~~~~~~~~~

My styles.scss worked perfectly with the previous version of Angular Material (v.17). It looks as follows:

@use '@angular/material' as mat;
@include mat.core();

$myapp-theme-primary: mat.define-palette(mat.$indigo-palette, A400, A100, A700);
$myapp-theme-accent: mat.define-palette(mat.$indigo-palette);
$myapp-theme-warn: mat.define-palette(mat.$red-palette);

$myapp-theme: mat.define-light-theme((
  color: (
    primary: $myapp-theme-primary,
    accent: $myapp-theme-accent,
    warn: $myapp-theme-warn,
  )
));

@include mat.all-component-themes($myapp-theme);

How do I have to adapt my code in styles.scss in order to make it work with Angular Material 18?

Weese

Answer 1

Seems like the automatic migration (ng update @angular/material) did not fully work for your app. define-palette and some other functions were deprecated and replaced with similar named functions using the m2- prefix:

See: https://github.com/angular/components/releases/tag/18.0.0 (look for the section Breaking Changes)

Change your code as follows:

@use '@angular/material' as mat;
@include mat.core();

$myapp-theme-primary: mat.m2-define-palette(mat.$m2-indigo-palette, A400, A100, A700);
$myapp-theme-accent: mat.m2-define-palette(mat.$m2-indigo-palette);
$myapp-theme-warn: mat.m2-define-palette(mat.$m2-red-palette);

$myapp-theme: mat.m2-define-light-theme((
  color: (
    primary: $myapp-theme-primary,
    accent: $myapp-theme-accent,
    warn: $myapp-theme-warn,
  )
));

@include mat.all-component-themes($myapp-theme);

Romanesque