如何将Angular 4应用升级至Angular 8？

兄弟，完全没必要新建应用再复制粘贴组件这种笨办法！Angular官方提供了一套渐进式升级流程，这才是最高效、最稳妥的方式——跨版本直接跳级很容易踩坑，所以建议按版本逐步升级：4 → 5 → 6 → 7 → 8。下面是具体操作步骤和注意事项：

第一步：升级到Angular 5 #

1. 检查Node.js版本：Angular 5要求Node.js 6.9.x+ 或 8.x.x，先在终端运行node -v确认版本，不够的话先升级Node。
2. 升级Angular CLI：先全局升级CLI到5.x版本：

   npm install -g @angular/cli@5
   

   然后在项目根目录升级本地CLI依赖：

   npm install @angular/cli@5 --save-dev
   

3. 升级核心Angular包：用CLI的官方升级命令，它会自动处理依赖更新和部分代码兼容调整：

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

4. 处理废弃API：Angular 5弃用了旧的Http模块，建议替换成新的HttpClient；另外路由的RouterModule.forRoot参数也有调整，根据终端提示或官方文档逐一修正代码。

第二步：升级到Angular 6 #

1. 确认Node.js版本：需要8.9.x+，没问题的话继续。
2. 升级CLI到6.x：

   npm install -g @angular/cli@6
   npm install @angular/cli@6 --save-dev
   

3. 运行升级命令：

   ng update @angular/core@6 @angular/cli@6
   

   这个版本引入了CLI新架构，同时强制升级rxjs到6.x。rxjs 6的操作符写法有变化（比如Observable.of要改成of），可以临时安装rxjs-compat包过渡，但建议最终替换成rxjs 6的标准写法。
4. 如果用了Angular Material：同步升级对应的版本：

   ng update @angular/material@6
   

第三步：升级到Angular 7 #

1. Node.js版本要求：还是8.9.x+，无需额外升级（如果之前已经到符合要求的版本）。
2. 升级CLI到7.x：

   npm install -g @angular/cli@7
   npm install @angular/cli@7 --save-dev
   

3. 执行升级：

   ng update @angular/core@7 @angular/cli@7
   

   Angular 7主要做了性能优化，API变化不大，根据终端提示修复少量兼容问题即可。如果用了Angular Material，同样执行ng update @angular/material@7。

第四步：升级到Angular 8 #

1. 升级Node.js：Angular 8要求Node.js 10.9.x+，先把Node升级到这个版本以上。
2. 升级CLI到8.x：

   npm install -g @angular/cli@8
   npm install @angular/cli@8 --save-dev
   

3. 升级核心包：

   ng update @angular/core@8 @angular/cli@8
   

   这个版本有几个关键变化：
   • 路由的loadChildren从字符串语法改成了函数式语法，CLI会自动帮你转换大部分，但如果有自定义路由配置可能需要手动调整。
   • 引入了Ivy渲染引擎（默认未开启，可手动配置启用）。
4. 收尾工作：
   • 移除rxjs-compat包（如果之前安装过），确保rxjs版本在6.4+以上。
   • 检查第三方依赖（比如UI组件库、工具包），确保它们支持Angular 8，升级到对应的兼容版本。

升级前的重要提醒 #

• 备份项目：升级前用Git创建一个新分支，或者直接复制整个项目目录，避免升级失败无法回滚。
• 分步验证：每升级完一个版本，都要运行npm run build和ng serve检查是否有报错，及时修复后再进行下一个版本的升级。
• 自定义配置调整：如果项目有自定义的Webpack配置，升级CLI后可能需要调整配置结构，因为Angular CLI的Webpack封装有变化。

总的来说，官方的ng update命令已经帮你处理了大部分繁琐的兼容工作，比新建项目复制组件靠谱多了——后者不仅容易遗漏配置和隐藏逻辑，还会浪费大量时间。

内容的提问来源于stack exchange，提问作者Basu Dev Adhikari