Angular 15迁移后依赖项目报错：主题与MDC迁移问题求助

一、先解决Shared.UserInterface2的Angular Workspace缺失问题 #

ng update和MDC迁移命令必须在包含angular.json的Angular Workspace中执行，因此先为Shared项目初始化Workspace：

• 进入Shared/Shared.UserInterface2目录，执行：

  ng new . --create-application=false
  

  该命令会生成angular.json及核心Workspace配置，不会创建默认应用。
• 若Shared是类库项目，执行以下命令生成标准库结构，再将现有代码迁移至projects/shared-user-interface2目录：

  ng generate library shared-user-interface2
  

二、同步Shared项目的Angular 15依赖 #

• 确保Shared/Shared.UserInterface2/package.json中所有Angular相关依赖版本为15.x，示例配置：

  {
    "dependencies": {
      "@angular/core": "^15.2.0",
      "@angular/material": "^15.2.0"
    },
    "devDependencies": {
      "@angular/cli": "^15.2.0",
      "@angular/compiler-cli": "^15.2.0"
    }
  }
  

• 执行依赖安装：

  npm install
  

三、执行MDC自动迁移命令 #

现在Shared项目已具备Workspace环境，可执行官方迁移命令：

ng generate @angular/material:mdc-migration

该命令会自动完成：旧Material组件替换为MDC版本、主题配置更新、样式依赖调整等操作。

四、手动修复主题错误（自动迁移未覆盖场景） #

若仍出现@angular/material/theming目录缺失或主题报错，按以下步骤修正：

• 将主题文件中的导入路径从@angular/material/theming替换为@angular/material/material-mdc-theming
• 使用MDC主题函数重构主题代码，示例：

  @use '@angular/material/material-mdc-theming' as mat;
  
  $my-primary: mat.define-palette(mat.$indigo-palette);
  $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
  $my-warn: mat.define-palette(mat.$red-palette);
  
  $my-theme: mat.define-mdc-theme($my-primary, $my-accent, $my-warn);
  
  @include mat.mdc-theme($my-theme);
  

• 替换预构建主题引用，例如将@angular/material/prebuilt-themes/indigo-pink.css改为@angular/material/prebuilt-themes/mdc-indigo-pink.css

五、无法执行自动迁移时的手动替代方案 #

若因特殊限制无法运行mdc-migration命令，需手动完成以下操作：

1. 组件标签替换：将所有旧Material组件替换为MDC版本，例如：
   • <mat-button> → <mat-mdc-button>
   • <mat-card> → <mat-mdc-card>
   • <mat-input> → <mat-mdc-input>（需配合<mat-mdc-form-field>使用）
2. Module导入校验：确保导入的是Angular 15官方的MDC组件Module（多数Module名称不变，但内部实现已切换为MDC）
3. 样式清理与更新：移除旧非MDC组件的样式依赖，替换为MDC组件对应的样式导入
4. 主题重构：按照步骤四的方式重新构建主题配置，完全适配MDC主题系统

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