Angular 14升级至15后mat-typography报错求助

问题背景 #

已将主项目FrontDesk/FrontDesk.UserInterface升级至Angular 15并完成material:mdc-migration，但依赖项目Shared/Shared.UserInterface2因无angular.json无法执行迁移命令，手动修复后仍在angular-material.scss中遇到排版样式加载错误，注释mat.core()和排版相关include可正常构建。

相关代码片段 #

angular-material.scss

/* ui2/angular-material */

// output-less includes

@use '@angular/material' as mat;

@use 'angular-material.declarations' as mat-decl;
@use 'clinicient-ui.declarations' as clinicient-ui;
@use 'clinicient-ui/mixins' as mixins;
 
//注释以下两行即可正常构建项目
@include mat.core();
@include mat.typography(mat-decl.$clinicient-material-typography);
@include mat.all-component-typographies(mat-decl.$clinicient-material-app-theme);

//包裹在body中，使相同选择器优先使用我们的样式而非Material的
body {
  @import 'angular-material/form-field';
  @import 'angular-material/label';
  @import 'angular-material/cdk';
  //@import 'angular-material/ripple';
  @import 'angular-material/button';
  @import 'angular-material/button-toggle';
  @import 'angular-material/icon';
  @import 'angular-material/list';
  @import 'angular-material/badge';
  @import 'angular-material/card';
  @import 'angular-material/checkbox';
  @import 'angular-material/chip';
  //@import 'angular-material/option';
  @import 'angular-material/tabs';
  //@import 'angular-material/autocomplete';
  @import 'angular-material/datepicker';
  @import 'angular-material/input';
  @import 'angular-material/select';
  //@import 'angular-material/slider';
  @import 'angular-material/slide-toggle';
  @import 'angular-material/sidenav';
  @import 'angular-material/snack-bar';
  @import 'angular-material/dialog';
  @import 'angular-material/expansion';
  @import 'angular-material/spinner';
  @import 'angular-material/table';
  @import 'angular-material/tooltip';
}

_angular-material.declarations.scss

//按Angular 15更新material排版参数
$clinicient-material-typography: mat.define-typography-config(
  $headline-1: mat.define-typography-level(clinicient-ui.$font-heading-1__size, clinicient-ui.$font-heading-1__size, 700),
  $headline-2: mat.define-typography-level(clinicient-ui.$font-heading-2__size, clinicient-ui.$font-heading-2__size, 700),
  $headline-3: mat.define-typography-level(clinicient-ui.$font-heading-3__size, clinicient-ui.$font-heading-3__size, 700),
  $headline-4: mat.define-typography-level(clinicient-ui.$font-primary__size, clinicient-ui.$font-primary__size, 700), //对应subheading-1
  $headline-5: mat.define-typography-level(clinicient-ui.$font-primary__size+4px, clinicient-ui.$font-primary__size+4px),
  $headline-6: mat.define-typography-level(clinicient-ui.$font-primary__size, clinicient-ui.$font-primary__size, 600),
  $body-1: mat.define-typography-level(clinicient-ui.$font-primary__size, clinicient-ui.$font-primary__size),
  $body-2: mat.define-typography-level(clinicient-ui.$font-primary__size, clinicient-ui.$font-primary__size, 600),
  $button: mat.define-typography-level(clinicient-ui.$font-primary__size, clinicient-ui.$font-primary__size, 600),
  $caption: mat.define-typography-level(clinicient-ui.$font-primary__size * 0.8),
  $font-family: clinicient-ui.$font-primary__family
);

//主题配置
$clinicient-material-app-accent-palette: mat.define-palette(mat.$deep-orange-palette, A200);
$clinicient-material-app-primary-palette: mat.define-palette($clinicient-material-primary-palette, 800);
$clinicient-material-app-warn-palette: mat.define-palette(mat.$red-palette, 900);

$clinicient-material-app-theme: mat.define-light-theme(
  $clinicient-material-app-primary-palette,
  $clinicient-material-app-accent-palette,
  $clinicient-material-app-warn-palette
);

修复步骤 #

1. 更新主题对象，集成排版配置 #

Angular 15 MDC迁移后，mat.define-light-theme不再接受单独的调色板参数，而是需要传入包含color、typography的配置对象。修改_angular-material.declarations.scss中的主题定义：

$clinicient-material-app-theme: mat.define-light-theme(
  (
    color: (
      primary: $clinicient-material-app-primary-palette,
      accent: $clinicient-material-app-accent-palette,
      warn: $clinicient-material-app-warn-palette,
    ),
    typography: $clinicient-material-typography, // 加入排版配置
  )
);

2. 调整样式文件中的include逻辑 #

在angular-material.scss中，移除单独的mat.typography调用，改用包含排版的主题样式引入：

@use '@angular/material' as mat;
@use 'angular-material.declarations' as mat-decl;
@use 'clinicient-ui.declarations' as clinicient-ui;
@use 'clinicient-ui/mixins' as mixins;
 
// 保留core初始化
@include mat.core();
// 用all-component-themes替代all-component-typographies，自动应用主题包含的排版和颜色
@include mat.all-component-themes(mat-decl.$clinicient-material-app-theme);

//包裹在body中，使相同选择器优先使用我们的样式而非Material的
body {
  // ... 原有import内容不变
}

原理说明 #

Angular Material 15的MDC重构后，排版系统与主题深度绑定，单独调用mat.typography会因API变更报错，而all-component-typographies也被all-component-themes替代，后者会自动应用主题中定义的颜色、排版等所有配置。将排版配置集成到主题对象中，即可通过一次include完成所有样式的初始化。

内容的提问来源于stack exchange，提问作者Ram Anugandula