Angular 11到升级到 Angular 16

日新月异,与时俱进…
随着Angular版本不断更新,再看所开发的项目版本仍然是Angular 11,于是准备升级
截止发博日最版本是 v17.1.0,考虑到稳定性因素决定升级到v16版本

一:查看 升级指南

二:按照指南,逐步升级

1、Angular 11 升级到Angular 12

执行命令行

ng update @angular/core@12 @angular/cli@12

但是发现直接报错了…
Angular 11 升级到 Angular 12
红色字体大概意思就是:
迁移失败:发现不兼容的对等依赖项
安装依赖项时的对等依赖项警告意味着这些依赖项可能无法正确协同工作。
您可以使用“–force”选项来忽略不兼容的对等依赖项,而是在以后处理这些警告。

既然提示文案中已经明确建议使用 --force 进行升级,于是在命令行后边加上 --force 试试

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

Angular11 升级到Angular12 --force
如图中所示,更新成功,并且会逐一列出都有哪些改动点,并且会根据要升级到的Angular12版本的语法规则自动修复项目中代码
例如:

angular.json 文件

去除了"buildOptimizer"、“aot”配置项,增加了“namedChunks”配置项等等
angular.json

package.json 文件

因为命令行会自动升级相对应的包,所以只截取了部分代码供参考。
package.json

test.ts 文件

test.ts
升级完 angular-cli,决定同时升级一下配套的 ng-zorro-antd 于是又到了 ng-zorro官网 查看 v13升级指南
在这里插入图片描述
按照指示,在终端输入 ng update ng-zorro-antd 之后发现直接把这个包升级到了v17版本,这还得了,不匹配了呀!随后加上版本号,并带上 --force 进行升级,就成功了

ng update ng-zorro-antd@12.1.1 --force

随后,开始运行项目,初尝试是否会报错???
答案当然是:是!
BrowserslistError
先排查了下 package.json 文件是不是某些包没自动升级导致的,后来排查到 “@ant-design/icons-angular” 仍然是 “^11.0.1”,随后进行了手动升级!

再次启动,仍然失败!

再后边又一直以为是 postcss-loader的锅,试了多种方案仍解决无果,直到注意到下边这句报错

BrowserslistError: Unknowm version 114 of android

果断!找到!文件!中的!

.browserslistrc 文件,一顿修改,再次启动,成功!

2、Angular 12 升级到 Angular 13

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

entryComponents is no longer available and any reference to it can be removed from the @NgModule and @Component public APIs.

这一命令会将项目中@NgModule 中所有包含 entryComponents 的地方的该属性全部自动删除!
ps:会智能识别到该 entryComponents 属性值是否被使用 ,如果未使用则不做处理。

注意:要同时升级 ng-zorro-antd 和 @ant-design/icons-angular

3、Angular 13 升级到 Angular 14

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

Angular13升级到Angular14
对于项目文件最大变化便是(自动全局替换,因为我们的是后台管理系统,所以一下子给我更改了六百多个文件…):
将 FormBuilder 更换为 UntypedFormBuilder
将 FormGroup 更换为 UntypedFormGroup
Untyped
除此之外,还有

angular.json 文件

去除了 “defaultProject”: “frontend”,

package.json 文件

package.json

tsconfig.json 文件

tsconfig
注意:要同时升级 ng-zorro-antd 和 @ant-design/icons-angular

4、Angular 14 升级到 Angular 15

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

package.json 文件

packagejson15

tsconfig.json 文件

tsconfig

test.ts 文件

test15

app-routing.module.ts 文件

 imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],更改为:imports: [RouterModule.forRoot(routes, {})],

注意:要同时升级 ng-zorro-antd 和 @ant-design/icons-angular

5、Angular 15 升级到 Angular 16

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

package.json 文件

package16
除此之外弃用 CanActivate, CanActivateChild
详情可见 官网说明

注意:要同时升级 ng-zorro-antd 和 @ant-design/icons-angular

注意:同步更改 ng-zorro-antd 相关语法
不同的版本要找不同的更新日志,例如:ng-zorro-antd 更新日志

ng-zorro-antd
温馨提示:遇到上述这种,一定要同步更改代码哦,要不然会启动不起来~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/295778.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Element】el-table 使用 el-table-infinite-scroll 插件实现滚动加载

虽然 el 官方提供了 Infinite Scroll 无限滚动 组件 但是却不支持 el-table 组件,这就很难受了,还好已经有大佬写好了插件,并且支持 element-plus/infinite-scroll 组件的所有选项。 el-table-infinite-scroll el-table-infinite-scroll 看…

「微服务模式」七种微服务反模式

什么是微服务 流行语经常为进化的概念提供背景,并且需要一个良好的“标签”来促进对话。微服务是一个新的“标签”,它定义了我个人一直在发现和使用的领域。文章和会议描述了一些事情,我慢慢意识到,过去几年我一直在发展自己的个人…

HarmonyOS的装饰器之BuilderParam 理解

BuilderParam 装饰器 使用时间:当定义了一个子组件,并且子组件的build()中有一个布局在不同的父组件,实现效果不一样的时候,可以在子组件中用这个BuilderParam装饰器, 在父组件用Builder 装饰器进行实现,然…

Netty-2-数据编解码

解析编解码支持的原理 以编码为例,要将对象序列化成字节流,你可以使用MessageToByteEncoder或MessageToMessageEncoder类。 这两个类都继承自ChannelOutboundHandlerAdapter适配器类,用于进行数据的转换。 其中,对于MessageToMe…

【MybatisPlus快速入门】(3)SpringBoot整合MybatisPlus 之 Lombok插件安装及MybatisPlus分页代码示例

目录 1.Lombok1.1 步骤1:添加lombok依赖 2.2 步骤2:安装Lombok的插件1.3 步骤3:模型类上添加注解2 分页功能2.1 步骤1:调用方法传入参数获取返回值2.2步骤2:设置分页拦截器2.3 步骤3:运行测试程序 之前我们已学习MyBatisPlus在代码示例与MyBatisPlus的简介,在这一节…

frp配置多端口内网穿透?frp多端口怎么配置?

使用frp作为内网穿透的时候,有时候,我们需要多个端口穿透,怎么配置呢? 更有frp相关👉:凯哥个人博客,搜索frp 思考: 我们知道frp要想内网穿透,需要配置服务端和客户端。…

【智慧办公】如何让智能会议室的电子标签实现远程、批量更新信息?东胜物联网硬件网关让解决方案更具竞争力

近年来,为了减少办公耗能、节能环保、降本增效,越来越多的企业开始从传统的办公模式转向智慧办公。 以智能会议室为例,会议是企业业务中不可或缺的一部分,但在传统办公模式下,一来会议前行政人员需要提前准备会议材料…

房顶漏水啦【算法赛】

问题描述 小蓝家的房顶是一个边长为 n 的正方形,可以看成是由 nn 个边长为 1 的小正方形格子组成。 从上到下第 i 行、从左到右第 j 列的格子用 (i,j) 表示。 小蓝的家由于年久失修,导致房顶有一些地方漏水。总共有 m 处漏水的地方,我们用…

2023年都找不到工作,软件测试已经崩了?

最近后台很多粉丝给我留言: 2023年软件测试已经崩盘了吗,为什么都找不到工作了? 确实,今年经济大环境不好,企业也都在降本增效,如果技术能力还在被应届生竞争岗位的阶段,只会越来越难。 找不…

【XML】TinyXML 详解(二):接口详解

【C】郭老二博文之&#xff1a;C目录 1、XML测试文件&#xff08;laoer.xml&#xff09; <?xml version"1.0" standalone"no" ?> <!-- Hello World !--> <root><child name"childName" id"1"><c_child…

自学华为鸿蒙开发?一般人我还是劝你算了吧!!!

本人纯屌丝一枚&#xff0c;在学编程之前对电脑的认知也就只限于上个网&#xff0c;玩个办公软件。这里不能跑题&#xff0c;我为啥说自学鸿蒙开发&#xff0c;一般人我还是劝你算了吧。因为我就是那个一般人。 基础真的很简单&#xff0c;是个人稍微认点真都能懂&#xff0c;…

RocketMQ事务消息实现分布式事务

文章目录 简介实现原理实现逻辑 简介 RocketMQ事务消息 RocketMQ在4.3.0版中支持分布式事务消息&#xff0c;这里RocketMQ的事务消息是采用2PC(两段式协议) 补偿机制&#xff08;消息回查&#xff09;的分布式事务功能。提供消息发送与业务落库的一致性。 RocketMQ事务消息&am…