Angular逐版升级至12后@angular/core版本显示异常无法更新问题

版本不一致的原因 #

ng --version 和 ng update 的版本识别逻辑不同：

• ng --version 优先读取当前已加载的最高版本Angular核心包，所以会显示已安装的12.2.9
• ng update 会扫描全量依赖声明和node_modules中的嵌套依赖，你当前项目中@angular/compiler-cli@8.2.14、@angular/forms@10.2.5等跨版本的Angular生态包还绑定了旧版@angular/core的依赖约束，因此会识别到8.2.14的残留版本提示

解决步骤 #

• 第一步：清理历史安装残留
  执行以下命令删除旧的依赖文件和缓存：

  # Windows系统执行
  rd /s /q node_modules && del package-lock.json
  # 类Unix系统执行
  rm -rf node_modules package-lock.json
  
  # 通用清理缓存命令
  npm cache clean --force
  

• 第二步：手动对齐所有Angular相关依赖版本
  打开package.json，把所有依赖的版本统一调整为和Angular 12.2.9匹配的版本：
  • 所有@angular/开头的包（包括compiler、compiler-cli、forms等）版本全改为12.2.9
  • 所有@angular-devkit/开头的包版本全改为12.2.9
  • @ngtools/webpack版本改为12.2.9
  • typescript版本改为~4.3.5（Angular 12官方适配的TypeScript版本，你当前的3.5.3版本过低）
• 第三步：重新安装依赖
  执行命令：
  npm install
• 第四步：验证版本一致性
  执行npm ls @angular/core，确认输出中只有12.2.9一个版本的@angular/core
• 第五步：执行版本更新
  此时再执行ng update就不会再出现版本不一致的提示，如果需要升级到12.2.10，直接执行：
  ng update @angular/core@12.2.10 @angular/cli@12.2.10

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