升级Angular 15后遗留组件样式缺失、格式异常问题咨询

针对Angular 14升级到15后遗留组件样式丢失、显示异常的问题，可按以下步骤排查修复：

• 在自定义主题中导入并应用遗留组件样式
  Angular 15将Material组件的新老版本样式拆分，若要保留遗留组件的样式，需在自定义主题SCSS文件中额外导入遗留主题并应用：

  // 定义自定义主题变量（保持原有配置不变）
  $primary: mat.define-palette(mat.$indigo-palette);
  $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
  $warn: mat.define-palette(mat.$red-palette);
  
  // 创建主题对象
  $theme: mat.define-light-theme((
    color: (
      primary: $primary,
      accent: $accent,
      warn: $warn,
    ),
  ));
  
  // 应用新组件主题（若仍使用新组件则保留）
  @include mat.all-component-themes($theme);
  
  // 关键：导入遗留主题并应用到所有遗留组件
  @import '@angular/material/legacy-theme';
  @include mat.all-legacy-component-themes($theme);
  

• 确认使用遗留版本的组件模块
  确保在模块中导入的是遗留组件模块而非新版本，以输入组件为例：

  import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
  import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
  
  @NgModule({
    imports: [
      // ...其他模块
      MatInputModule,
      MatFormFieldModule
    ]
  })
  export class YourModule { }
  

• 检查样式配置与清除缓存

  1. 确认angular.json的styles数组中已正确引用自定义主题SCSS文件；
  2. 执行ng clean清除构建缓存，再重新运行ng serve或ng build，确保样式编译生效。

• 排查主题兼容性
  自定义主题使用mat.define-light-theme/mat.define-dark-theme创建的对象可直接用于遗留主题，无需额外修改，只需确保通过mat.all-legacy-component-themes将主题应用到遗留组件即可。

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