如何将Angular 4项目升级至最新版本Angular 16

前置准备 #

• 先备份项目代码，或通过Git提交当前状态，避免升级失败无法回滚
• 升级Node.js到16.14.x 或 18.x（Angular 16的最低要求），同时同步更新npm到对应兼容版本

核心原则：逐步升级，每步验证 #

由于跨版本跨度极大，不能直接跳级升级，需按官方推荐的版本路径逐步升级：4 → 5 → 6 → 7 → 8 → 9 → 10 → 11 → 12 → 13 → 14 → 15 → 16，每个版本升级完成后，务必验证项目能正常启动、运行，再进行下一个版本的升级。

每个版本升级的通用操作 #

1. 执行Angular CLI升级命令，以升级到Angular 5为例：

   ng update @angular/cli@5 @angular/core@5
   

   替换命令中的版本号，依次升级到后续版本。
2. 解决依赖冲突：CLI会自动检测并提示依赖不兼容问题，按照提示修改package.json中的依赖版本，或手动安装对应兼容版本。
3. 修复废弃API：每个版本都会移除/废弃部分API，升级过程中CLI会给出具体报错提示，或参考对应版本的官方更新日志，逐个修复代码中的问题。
4. 验证项目：执行ng serve启动项目，检查页面功能是否正常；执行ng test确保单元测试通过。

关键版本升级注意事项 #

• Angular 4 → 5
  • 替换HttpModule为HttpClientModule，Http类替换为HttpClient，响应默认解析为JSON，无需再调用.map(res => res.json())
  • rxjs升级到5.5+，改为使用pipeable操作符，比如import { map } from 'rxjs/operators'替代原Observable.map写法
• Angular 5 → 6
  • CLI命令调整：ng build --prod改为ng build --configuration production
  • rxjs升级到6.x，可先安装rxjs-compat临时兼容旧代码，后续逐步迁移到新的导入方式
  • 同步升级Angular Material等第三方UI库到对应版本
• Angular 8 → 9
  • Ivy编译器成为默认，移除ViewEngine相关配置；若有依赖不支持Ivy，可暂时在tsconfig.json中设置"enableIvy": false，后续再适配
  • entryComponents在多数场景下不再需要，仅动态组件需保留
• Angular 12 → 13
  • 彻底移除IE11支持，若项目需兼容IE11，需停留在Angular 12
  • TypeScript需升级到4.4+
• Angular 15 → 16
  • TypeScript需升级到5.0+
  • 独立组件特性稳定，可按需迁移，但非强制要求
  • 移除NgForm等API的废弃属性，需替换为新的实现方式

升级完成后收尾 #

1. 清理旧依赖文件，重新安装：

   rm -rf node_modules package-lock.json
   npm install
   

2. 检查所有第三方库（如ngx-bootstrap、angular/material）是否支持Angular 16，升级到对应兼容版本
3. 执行ng lint修复代码风格问题，ng build --configuration production验证打包正常

内容的提问来源于stack exchange，提问作者I'mBehnam