После обновления основных библиотек 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?
🤔 А знаете ли вы, что...
Angular позволяет создавать кастомные директивы для расширения функциональности HTML.
Похоже, автоматическая миграция (ng update @angular/material) не полностью сработала для вашего приложения. define-palette и некоторые другие функции были признаны устаревшими и заменены функциями с аналогичными именами, использующими префикс m2-:
См.: https://github.com/angular/comComponents/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);