Angular Material 18：mat.define-palette() 导致“未定义函数”错误

Question

将我的 Angular 核心库升级到版本 18 后，我通过运行以下命令迁移到 Angular Material 18：

ng update @angular/material

更新进行得很顺利，但是当我尝试编译我的应用程序时，出现以下错误：

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';
        ╵         ~~~~~~~~~~~~~~~~~

我的

styles.scss

与之前版本的 Angular Material (v.17) 完美配合。看起来如下：

@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);

我必须如何调整

styles.scss

中的代码才能使其与 Angular Material 18 一起使用？

Answer 1

似乎自动迁移 (

ng update @angular/material

) 并未完全适用于您的应用程序。

define-palette

和其他一些函数已被弃用，并替换为使用

m2-

前缀的类似命名函数：

参见：https://github.com/angular/components/releases/tag/18.0.0

按如下方式更改您的代码：

@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);