从Angular 13升级到Angular 15

1. 前言

升级应用程序或者框架是软件生命周期中非常重要的一项活动. 因为其有风险性, 很多人不愿意去做, 久而久之随着技术债务的积累变成了一件不能去做的事情.

在我的职业生涯中见到过很大这样逐渐失去生命活力的系统, 这里就不具体举例了, 以免引起不必要的争论, 明白的人自然明白.

其中的风险, 主要来自新旧版本的不兼容性. 如果兼容旧版本, 无疑是库开发者负责任承担起了这种风险, 但是也导致库变得臃肿, 因循守旧, 开发低效, 逐渐地失去活力. 如果库开发者一路更新向前, 不考虑向前兼容, 库开发走得轻快了, 也该库或者框架的使用者带来了很多创新性的体验, 但是把兼容性风险留给了使用者. 在兼容性, 和创新节奏, 库的活力之间看似鱼和熊掌很难兼得.

而Angular在兼容性和变革之间很好地为我们做出了一个榜样, 也是将来版本升级很好的榜样. 首先Angular是大胆变革的. 其主版本号没6个月就有一次变更, 自从2016年发布Angular 2.x版本后, 如今一直保持着相似的节奏, 一路升级到Angular 16.x. 而每次主版本号的变更可能包含了大量的breaking change和新特性. 其中有好几个大版本之间差异是很大的. 而Angular是如何做到既大胆创新, 又兼顾历史遗留的呢? 那就是Angular schematics, 它不是简单的代码生成工具. 它也是一个代码重构工具, 这样Angular就可以大版本变化是使用一个或多个schematics帮助老旧系统自动完成绝大多数的重构工作. 这样旧系统就可以轻松的升级到新版本的Angular了. 只要按照Angular提供的升级路线, 库或框架使用者就能轻松的完成升级 而Angular也不必在新的库中考虑老用户一些传统的习惯和使用方式, 做到轻松上阵.

无独有偶, gitlab的升级方式也是类似的, 在大版本之间提供postscript来弥合新旧版本的差异, 并给使用者提供了清晰的升级路线图. 所以可以预测在将来的开发中, 这种在新旧版本之间使用postscript或Schematics的方式将逐渐成为一种版本升级的趋势. 开发过库代码的人肯定知道向前兼容是一件多么烧脑和让代码逻辑变得扭曲的事情.

而这种方式带来的坏处就是, 升级变得不像以前那么简单了, 以前升级只需要改个数字, 而现在需要去查升级路线图, 还要执行相应的弥合裂缝的代码. 但是深入思考一下, 这种牺牲还是很值得的, 因为以前开发人员改一下版本号是轻松, 但是将潜在的问题留给了测试人员, 甚至留给了运维人员, 甚至更后, 变得越来越昂贵. 而现在有一条清晰的升级路线, 而这条路线是无数人踩过的, 心里总是会踏实很多.

2. 升级前的准备工作

升级前最好阅读一遍Angular 14, 15的release notes. 本文讲述的是从Angular 13升级到Angular 15, 所以需要阅读这两个release notes: Angular 14 release notes 和
Angular 15 release notes

里面详细描述了有那些breaking change那些新的弃用, 多我们的迁移工作会非常有帮助.

另外我们需要阅读一下更新指南, 这个更新指南是一个动态的指南, 需要选择从哪个版本升级到哪个版本, 项目中用到了哪些特殊包, 在此基础上系统自动帮我们生成一份更新指南, 非常的人性化, 这是Angular升级特殊之处, 也是很容易被忽视的一点. 更新指南可以在这里找到

3. 开始升级

由于本文的目标是从Angular 13升级到Angular 15, 所以升级路径首先是从Angular 13升级到Angular 14再从Angular 14升级到Angular 15, 不能一次性升级到Angular 15.

3.1. Angular 13升级到Angular 14

3.1.1. 步骤一: 更新所有Angular的组件到14

ng update @angular/core@14 @angular/cli@14 --force

注意，不加–force无法正常升级。
同时，还要事前事后都要commit一次。

3.1.2. 步骤二: 升级Angular Material到v14

ng update @angular/material@14 --force

该步骤只适用于使用了Angular Material的项目。

3.1.3. 步骤三: 更新eslint到v14

 ng update @angular-eslint/schematics@14

如果项目中使用了angular-eslint, 可以使用以上命令升级到v14。

3.1.4. 步骤四：更新一些别的非Angular官方的组件

npm i @angular/flex-layout@14.0.0-beta.41 ngx-markdown@14.0.1

3.1.5. 步骤五：更新typescript到4.6

官方文档说，Angular 14支持4.6，没必要安装更新的Typescript版本，免得无谓的不兼容问题。

npm install typescript@4.6.4 -D

3.1.6. 步骤六，更新代码

手动解决一些更新指南中的内容.

另外一个问题，如果使用了moment、lodash这样的库，会报出一条warning：

material-moment-adapter.mjs depends on ‘moment’. CommonJS or AMD dependencies can cause optimization bailouts.

官方文档：链接
答案是去更新Angular.json

"allowedCommonJsDependencies": [
        "lodash",
        "moment"
 ]

3.1.7. 步骤七：启动程序, 手动测试

现在可以启动程序了npm run start或者ng serve, 并进行一些测试和检查.

3.2. Angular 14升级到Angular 15

3.2.1. 步骤一: 更新所有Angular的组件到15

ng update @angular/core@15 @angular/cli@15 @angular/material@15 --force

为了防止一些次要组件不兼容导致主要的升级过程失败, 可以加上--force选项.

当然如果你想再主要组件升级之前解决所有阻碍升级的问题, 则可以去掉force选项.

如果使用到@angular-eslint, 可以使用如下命令更新@angular-eslint到v15

ng update @angular-eslint/schematics@15

3.2.2. 步骤二: 迁移Legacy Angular material组件到MDC-based Angular material组件

因为从Angular 14到15, material design组件发生了比较大的变化, 所以需要执行这一步骤.

详情请阅读Material MDC Migration的官方文档 以及我翻译的文章鹏叔的技术博客空间 MDC-based Angular Material组件迁移

ng generate @angular/material:mdc-migration

执行上述指令或者创建一条新的script在运行都可以。
这条migration指令提供了交互式的选项，根据本身项目的特点进行选择。

3.2.3. 步骤三: 执行测试指令

ng test

在新的版本上对原代码进行编译和测试，有助于升级后的问题发现和解决。

3.2.4. 步骤四：启动程序, 手动测试

现在可以启动程序了npm run start或者ng serve, 并进行一些测试和检查.

npm run start
# 或者
ng serve --open

后记

本文原文位于从Angular 13升级到Angular 15, 欢迎访问原文以获得最近更新.
更多Angular相关文章请访问鹏叔的技术博客空间 - Angular专题

4. 参考文档

Angular：升级Angular 13到Angular 14

Angular: 升级Angular 14到Angular 15