在Webpack 5项目中运行Angular Material MDC迁移脚本失败求助

以下是针对性的排查和解决步骤：

• 检查版本兼容性
  MDC迁移脚本要求Angular CLI和@angular/material版本均≥15，且两者版本保持一致。执行ng version查看当前版本：

  • 若版本低于15，运行ng update @angular/cli @angular/material升级（升级前务必备份项目）；
  • 若版本不一致，调整至匹配版本，例如安装指定版本：npm install @angular/material@15.2.9 @angular/cli@15.2.9 --save-dev

• 确保本地安装Angular CLI
  全局CLI版本可能与项目依赖不兼容，优先使用本地CLI。检查项目根目录node_modules/@angular/cli是否存在，若不存在则安装：

  npm install @angular/cli --save-dev
  

• 直接执行原命令查看详细报错
  跳过npm script，直接在终端运行：

  ng generate @angular/material:mdc-migration
  

  根据报错信息定位问题：

  • 若提示缺少@angular/cdk，安装对应版本：npm install @angular/cdk@<你的Material版本>；
  • 若提示配置错误，检查angular.json中项目配置的合法性。

• 排查Webpack自定义配置冲突
  若项目使用了自定义Webpack配置：

  • 确认angular.json中projects[你的项目名].architect.build.builder为默认的@angular-devkit/build-angular:browser；
  • 暂时移除自定义Webpack配置（注释angular.json中的customWebpackConfig字段），重试迁移脚本。

• 清理缓存并重建依赖
  缓存或损坏的依赖可能导致执行失败，执行以下操作：

  # 清理npm缓存
  npm cache clean --force
  # 清理Angular CLI缓存
  ng cache clean
  # 删除依赖文件并重新安装
  rm -rf node_modules package-lock.json
  npm install
  

  Windows环境替换为：

  rmdir /s /q node_modules
  del package-lock.json
  npm install
  

• 确保工作区代码干净
  迁移脚本会修改项目文件，先执行git status检查是否有未提交的变更，提交或暂存变更后再运行脚本，避免文件冲突。

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