Angular 14升级到15后UI显示异常，使用Legacy组件仍未解决

针对你升级后出现的样式错乱、功能失效问题，按以下步骤逐一修复：

1. 统一切换到Material Legacy组件的完整实现 #

你已经在模块中导入了Legacy组件，但模板和业务代码中的组件引用没同步更新是核心问题：

• 替换所有组件类引用：将代码中MatDialog、MatButton等替换为MatLegacyDialog、MatLegacyButton，包括构造函数注入和类型声明
• 修正模板指令前缀：把迁移工具自动改成的mat-mdc-前缀全部替换为mat-legacy-，比如：
  • <button mat-mdc-button> → <button mat-legacy-button>
  • <mat-mdc-dialog-content> → <mat-legacy-dialog-content>
  • 其他组件如输入框、卡片同理，确保指令与Legacy模块对应
• 禁止混合导入：检查app-material.module.ts，确保没有同时导入新旧版本组件（比如不能同时存在MatDialogModule和MatLegacyDialogModule）

2. 修正主题样式配置 #

当前主题文件使用了新组件的混入方法，会导致Legacy组件样式异常，修改custom-theme.scss：

// 替换为Legacy主题入口
@use '@angular/material/legacy' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

// 使用Legacy专属的主题混入，仅对Legacy组件生效
@include mat.all-legacy-component-themes($my-theme);

注意：不要修改node_modules中的自动生成文件，所有自定义样式调整只在项目自有文件中进行

3. 清理样式文件冲突 #

调整angular.json中的styles顺序并移除重复项：

"styles": [
  "src/css/custom-theme.scss", // 自定义主题优先加载
  "node_modules/ag-grid-community/dist/styles/ag-grid.css",
  "node_modules/ag-grid-community/dist/styles/ag-theme-material.css",
  "node_modules/material-design-icons/iconfont/material-icons.css",
  "../wwwroot/bootstrap/bootstrap.min.css",
  "../wwwroot/css/site.css",
  "src/css/styles.css", // 移除重复的src/styles.css
  "src/css/styles-legacy.css",
  "src/third-party/fullcalendar/fullcalendar.min.css"
],

4. 修复LegacyDialog的具体问题 #

如果切换MatLegacyDialog后页面部分无法显示，检查以下点：

• 确认对话框组件的模板中使用了mat-legacy-dialog-content、mat-legacy-dialog-actions等Legacy指令
• 自定义对话框容器样式时，将选择器从.mat-dialog-container改为.mat-legacy-dialog-container
• 打开对话框的配置项保持与原版本一致，LegacyDialog的API与旧版MatDialog兼容，无需修改配置结构

最终验证步骤 #

1. 执行依赖安装：npm install
2. 清理构建缓存：ng cache clean --all
3. 重新构建项目：ng build
4. 启动开发服务器：ng serve，逐一验证页面样式和功能

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