将Angular 10升级至16后出现依赖错误，求解决方案

问题现象 #

从Angular 10逐步升级到16，执行15→16步骤时出现以下问题：

• 执行ng version，Angular核心包、@angular-devkit/build-angular、typescript、zone.js均显示<error>
• 执行ng build报错：Error: Could not find the '@angular-devkit/build-angular:browser' builder's node package.
• 执行npm install先出现esbuild相关UNKNOWN错误，随后触发ERESOLVE依赖冲突，提示@angular-devkit/build-angular@16.2.14与@angular/compiler-cli peer依赖不匹配
• 排查发现package.json中devDependencies指定@angular-devkit/build-angular为^16.2.14，但package-lock.json中仍为^15.2.11，清理npm缓存无效

解决步骤 #

1. 彻底清理依赖环境 #

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json（若使用yarn则删除yarn.lock）
• 强制清理npm缓存：

  npm cache clean --force
  

2. 修正package.json版本匹配 #

• 确保所有Angular相关包（核心、compiler-cli、devkit/build-angular等）版本完全一致，不要使用^前缀，例如统一指定为16.2.14：

  "dependencies": {
    "@angular/core": "16.2.14",
    "zone.js": "~0.13.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "16.2.14",
    "@angular/compiler-cli": "16.2.14",
    "typescript": "~4.9.5"
  }
  

  注：Angular 16要求TypeScript版本为4.9.x，zone.js为~0.13.x，需严格对应

3. 重新安装依赖 #

• 先手动安装esbuild指定版本（解决UNKNOWN错误）：

  npm install esbuild@^0.19.0
  

• 执行常规安装：

  npm install
  

• 若仍存在ERESOLVE冲突，可临时使用兼容模式安装（仅临时使用，优先修正版本匹配）：

  npm install --legacy-peer-deps
  

4. 验证修复结果 #

• 执行ng version检查所有包版本是否正常显示
• 执行ng build测试项目构建是否成功

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