一步一步升级到Angular 16

Angular 16 于 2023 年 5 月 3 日发布.

今天,我计划向您介绍如何升级到 Angular 16。

1. 升级前准备

升级前到 Angular 16 之前, 请确保当前 Angular 已经升级到 Angular 15, 并完成了 Angular 15 所有的迁移任务. 如果没有完成 Angular 13 到 14, 以及 14 到 15 的升级任务, 可以参考我的博客从 Angular 13 升级到 Angular 15

升级前需要了解 Angular 16 与 Typescript, nodejs 等的版本兼容信息. 可以参考Actively supported versions

Actively supported versions

ANGULARNODE.JSTYPESCRIPTRXJS
16.1.x || 16.2.x^16.14.0 || ^18.10.0>=4.9.3 <5.2.0^6.5.3 || ^7.4.0
16.0.x^16.14.0 || ^18.10.0>=4.9.3 <5.1.0^6.5.3 || ^7.4.0
15.1.x || 15.2.x^14.20.0 || ^16.13.0 || ^18.10.0>=4.8.2 <5.0.0^6.5.3 || ^7.4.0
15.0.x^14.20.0 || ^16.13.0 || ^18.10.0~4.8.2^6.5.3 || ^7.4.0
14.2.x || 14.3.x^14.15.0 || ^16.10.0>=4.6.2 <4.9.0^6.5.3 || ^7.4.0
14.0.x || 14.1.x^14.15.0 || ^16.10.0>=4.6.2 <4.8.0^6.5.3 || ^7.4.0

1.1. 升级 Nodejs

可以参考我的博客安装并配置 nodejs, 进行安装升级和配置.

对于 Angular 16 来说, 建议升级到 v16.14.2 或者 v18.10.0

1.2. 升级 Angular 以及 Typescript

升级 Nodejs 后, 需要重新安装配置 angular cli, 此步骤可用参考我的博客Angular CLI 安装和使用, Angular 建议安装最新版本 16.2.10

总结下来也就以下几步:

1
2
3
4
5
6
7
8

# 安装 typescript
npm i -g [email protected]
# 安装 Angular CLI
npm install -g @angular/[email protected]
# 或者
cnpm install -g @angular/[email protected]

2. 升级 Angular 到 v16

前面得准备工作完成后, 接下来就是重要得步骤, 升级 Angular 应用程序了.

升级前建议您先到https://update.angular.io/?l=3&v=15.0-16.0 阅读一下有哪些更新, 以及官方建议的步骤, 做到心中有数.

另外建议备份程序, 切换到新的分支, 如果不成功, 可以立即回撤.

2.1. 升级 angular cli, core 和 cdk

首先运行以下命令, 通常情况下不会成功, 但是会列出一些依赖关系问题, 确定一下依赖关系不存在严重问题, 可以使用–force 选项继续更新.

1
2
3

ng update @angular/[email protected] @angular/[email protected] @angular/[email protected]

然后先升级 angular cli, core

1
2
3

ng update @angular/[email protected] @angular/[email protected] --force

再升级 CDK

1
2
3

ng update @angular/[email protected]

如果项目中使用了 angular material, 需要将其升级到对应的版本

1
2
3

ng update @angular/[email protected]

3. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

4. 参考文档

Upgrade to Angular 16 step by step

作者

鹏叔

发布于

2023-11-08

更新于

2024-08-06

许可协议

评论