将 Angular 10 项目升级到 Angular 13

近两年前，将公司部分项目从 Angular 6 升级到 Angular 10，现在因为 Angular 10 已经不再维护，因此继续升级。

除了参考上次升级的原则之外，还有如下要点：

1. 较大项目往往是用了多种第三方包，具有复杂依赖关系，很多情况下运行 ng update 命令后会在最后 npm install 环节安装不成功。此时可以删掉 package-lock.json 文件，排除本地安装的老版本的库的影响，然后再试。若仍报错，则看看是什么库的依赖冲突，npm install 该库更新的版本。基本上只要细心分析逐个解决，最终都可以成功的。
2. 善用 npmjs.com 查看各个包的版本信息，本地要查看某个包被哪些包依赖，可以用 npm ls packagename 来看。有时候依赖冲突太多的情况，可以先用 –force 参数强行安装某个库，再解决余下的。
3. 若项目中引用的第三方库已经不再维护，又找不到可以不改代码直接替换的库，这时候就需要考虑自己 fork 该项目，进行改写，以支持更新版本的 Angular。
4. 逐个版本升级，按照官方文档（选择高级里面的提示，更详细）逐个确认是否有需要修改的代码。
5. 尽量每个升级都把项目成功跑起来预览。若项目启动遇到问题，则根据报错进行修改。部分的可能性是 Angular 组件用法修改造成的。也有可能是项目某些组件引入不成功造成的，后者的错误信息往往看起来很可怕，一大片红色，但往往症结所在其实只是某一个简单的点。
6. 能够成功编译，能够成功运行，不代表升级就完全成功，最后一个环节检查能否成功打包：ng build –configuration production 若无报错，才是真正成功。因为这个环节会有更严格的代码规范检查，可以用 ng lint 来辅助发现需要修复的问题。

作者： Ben

IT、电商、零售、医药行业混迹多年的理想主义者。 查看Ben的所有文章