Angular 15迁移MDC后构建随机失败问题求助

根据报错信息，问题根源是Material Typography工具函数尝试访问null值的配置映射，这通常是配置加载顺序异常或缓存导致的随机问题，以下是具体解决思路：

• 检查组件SCSS的Typography引用逻辑
  确保组件样式中先初始化Material核心配置，再调用Typography相关函数。比如：

  @use '@angular/material/core' as mat;
  // 先初始化核心配置，包含Typography的默认/自定义配置
  @include mat.core();
  
  .home-component-class {
    // 之后再使用font-size等工具函数
    font-size: mat.font-size('body-1');
  }
  

  若使用自定义Typography配置，需确保配置文件在组件样式前被导入并应用。

• 校准全局样式加载顺序
  在angular.json的styles数组中，确保Material主题文件（预构建主题或自定义主题）排在组件样式之前。自定义主题中要明确传入Typography配置：

  @use '@angular/material/core' as mat;
  
  $custom-typography: mat.define-typography-config(
    // 按需配置字体、字号等参数
  );
  
  $custom-theme: mat.define-light-theme(
    (
      color: mat.define-palette(mat.$indigo-palette),
      typography: $custom-typography,
    )
  );
  
  @include mat.all-component-themes($custom-theme);
  

• 清理缓存并强制全量构建
  随机失败大概率和构建缓存有关，执行以下命令彻底清理缓存并重新安装依赖：

  ng cache clean
  rm -rf node_modules package-lock.json
  npm install
  ng build --no-cache
  

  后续构建可暂时禁用缓存，直到问题彻底解决。

• 排查第三方库的适配问题
  检查更新后的第三方包是否适配Material MDC的Typography API，部分库可能仍在使用Legacy方式调用Typography函数，导致配置未正确初始化。必要时临时修改第三方库的样式导入逻辑，或向库作者提交适配请求。

• 重新执行MDC迁移脚本
  确保迁移脚本完整转换了所有Legacy Typography引用：

  ng generate @angular/material:mdc-migration
  

  手动检查迁移后的样式文件，修复脚本未覆盖的Legacy API（如旧的mat-typography混合宏）。

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