Angular12升级至14后执行npm install报大量错误如何解决

直接全局安装最新版@angular/cli未做跨版本依赖对齐，是引发TypeScript、@angular-devkit/build-angular依赖报错、项目依赖安装失败的核心原因，按以下步骤操作即可修复：

• 清理残留冲突文件与依赖
  依次执行以下命令，卸载错误版本的CLI、删除损坏的依赖缓存和锁文件：

  # 卸载全局Angular CLI
  npm uninstall -g @angular/cli
  # 卸载项目内残留的不兼容依赖
  npm uninstall @angular/cli @angular-devkit/build-angular typescript
  # 删除损坏的依赖目录和版本锁文件
  rm -rf node_modules package-lock.json
  # Windows 命令行环境请替换上面的rm命令为以下两条：
  # rd /s /q node_modules
  # del package-lock.json
  

• 安装匹配v14版本的全局Angular CLI
  不要直接安装latest标签的CLI，v15及以上版本和v14项目不兼容，执行以下命令安装指定大版本：

  npm install -g @angular/cli@14
  

  安装完成后执行ng version，确认全局CLI版本号为14.x.x即可进入下一步。
• 执行官方升级命令自动对齐所有兼容依赖
  不要手动单独安装TypeScript或@angular-devkit/build-angular，Angular大版本对配套依赖有严格的版本绑定要求，手动安装极易出现版本不匹配问题。在项目根目录执行官方升级命令：

  ng update @angular/core@14 @angular/cli@14 --force
  

  若项目使用了Angular Material组件库，上述命令执行完成后追加执行ng update @angular/material@14即可；--force参数用于强制覆盖跨版本升级时的peer依赖警告，避免升级流程被无关依赖阻断。

• 升级结果校验
  依赖安装完成后执行ng version，确认以下版本匹配规则：
  • @angular/core、@angular/cli、@angular-devkit/build-angular大版本均为14
  • TypeScript版本在4.6.x~4.8.x区间内（v14官方支持的TS版本范围）
    校验通过后执行ng serve，确认项目可正常启动编译即修复完成。

• 补充注意：如果ng update执行过程中仍报peer依赖冲突，可先打开package.json删除所有带@angular前缀的依赖的版本号配置，重新执行升级命令即可。

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