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.mzph.cn/news/241277.shtml

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

相关文章

推荐算法架构7:特征工程(吊打面试官,史上最全!)

系列文章,请多关注 推荐算法架构1:召回 推荐算法架构2:粗排 推荐算法架构3:精排 推荐算法架构4:重排 推荐算法架构5:全链路专项优化 推荐算法架构6:数据样本 推荐算法架构7:特…

数据校园服务管理系统,教育平台可视化界面(教育资源信息化PS文件)

大屏组件可以让UI设计师的工作更加便捷,使其更高效快速的完成设计任务。现分享大数据校园服务管理系统、科技教育平台大数据可视化界面、教育资源信息化大数据分析等Photoshop源文件,文末提供完整资料,供UI设计师们工作使用。 若需其他 大屏…

Linux一行命令配置jdk环境

使用方法: 压缩包上传 到/opt, 更换命令中对应的jdk包名即可。 注意点:jdk-8u151-linux-x64.tar.gz 解压后名字是jdk1.8.0_151 sudo tar -zxvf jdk-8u151-linux-x64.tar.gz -C /opt && echo export JAVA_HOME/opt/jdk1.8.0_151 | sudo tee -a …

unity中使用protobuf工具将proto文件转为C#实体脚本

unity中使用protobuf工具将proto文件转为C#实体脚本 介绍优点缺点Protobuf 为什么比 XML 快得多?Protobuf的EncodingProtobuf封解包的过程通常编写一个Google Protocol Buffer应用需要以下几步: Protostuff是什么Protobuf工具总结 介绍 protobuf也就是G…

Java面向对象(初级)

面向对象编程(基础) 面向对象编程(OOP)是一种编程范式,它强调程序设计是围绕对象、类和方法构建的。在面向对象编程中,程序被组织为一组对象,这些对象可以互相传递消息。面向对象编程的核心概念包括封装、继承和多态。…

Vue3选项式API和组合式API详解

前言 相信学习Vue3的人中大多数都是之前使用Vue2开发的,当拿到一个Vue3项目时就接触到了组合式api,但对于组合式api不了解的人第一眼看上去会觉得一头雾水。:“什么玩意,乱七八糟的,选项式api多好,方法变量…

Linux bridge开启hairpin模拟测试macvlan vepa模式

看到网上介绍可以通过Linux bridge 开启hairpin方式测试macvlan vepa模式,但是没有找到详细资料。我尝试测试总提示错误信息,无法实现,经过几天的研究,我总算实现模拟测试,记录如下: 参考 1.Linux Macvla…

「Vue3面试系列」Vue3.0性能提升主要是通过哪几方面体现的?

文章目录 一、编译阶段diff算法优化静态提升事件监听缓存SSR优化 二、源码体积三、响应式系统参考文献 一、编译阶段 回顾Vue2,我们知道每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把用到的数据property记录为依赖,当依赖发…

MicroPython的交互式解释器模式 REPL

MicroPython的交互式解释器模式又名REPL(read-eval-print-loop),就是一种命令输入交互模式,跟Python的REPL是类似的,就是在命令行直接输入Python代码或表达式执行并打印结果。关于MicroPython的REPL跟通常的Python类似…

linux运维面试题

linux运维面试题 面试 K8S篇(高可用) Q:k8s是什么?架构? Kubenetes是一个开源的容器集群管理系统。主要用于容器编排,解决容器调度问题。当应用请求时,k8s需要合理分配请求到空闲node节点上去。k8s使用的主从模式&…

python通过JS逆向采集艺恩电影数据, 并制作可视化

嗨喽~大家好呀,这里是魔王呐 ❤ ~! 如果有什么疑惑/资料需要的可以点击文章末尾名片领取源码 环境使用: 版 本: python 3.10 编辑器:pycharm 2022.3.2 nodejs 模块使用: requests -> pip install requests execjs -> pip install…

【Git】在 IDEA 中合并多个 commit 为一个

文章目录 1 未提交到远程分支1.1 需求说明1.2 reset 操作1.3 再次 push 2 已经提交到远程分支2.1 需求说明2.2 rebase 操作2.3 强制 push 分两种情况: 一种是本地提交还没推到远程,这种好处理另一种是已经提交到远程分支,这个略麻烦 1 未提…

【接口测试】Postman(三)-变量与集合

一、变量 ​ 变量这个概念相信大家都不陌生,因此在这里我们不介绍了。主要说一下在Postman中有哪几类变量,主要包括以下四类: Global(全局) Environment(环境) Local(本地&#xf…

Linux中安装Maven3.6.1

一、安装及配置maven 1.下载maven安装包 首先需要切换到自己需要安装的目录 我自己是把配置都放到了:/usr/local/maven路径下 cd /usr/local/maven 下载maven安装包: wget https://archive.apache.org/dist/maven/maven-3/3.6.1/binaries/apache-maven…

FreeRTOS信号量学习

目录 一、信号量的特性 1. 信号量的常规操作 2. 信号量跟队列的对比 3. 两种信号量的对比 4. 信号量函数 4.1 创建 4.2 删除 4.3 give/take 5. 使用二进制信号量来同步 6. 防止数据丢失 7. 使用计数型信号量 队列(queue)可以用于传输数据:在任务之间、任务和…

Linux多线程:线程池(单例),读写锁

目录 一、线程池(单例模式)1.1 makefile1.2 LockGuard.hpp1.3 log.hpp1.4 Task.hpp1.5 Thread.hpp1.6 ThreadPool.hpp1.7 main.cc 二、STL,智能指针和线程安全2.1 STL中的容器是否是线程安全的?2.2 智能指针是否是线程安全的? 三、其他常见的各种锁四、…

微服务之配置中心与服务跟踪

zookeeper 配置中心 实现的架构图如下所示,采取数据加载到内存方式解决高效获取的问题,借助 zookeeper 的节点监听机制来实现实时感知。 配置中心数据分类 事件调度(kafka) 消息服务和事件的统一调度,常用用 kafka …

使用Java语言中的算法输出杨辉三角形

一、算法思想 创建一个名为YanghuiTest的类,然后创建二维数组,然后遍历二维数组的第一层,然后初始化第二层数组的大小,然后遍历第二层数组,然后将两侧的数组元素赋为1,然后其它数值通过公式计算,最后可以输…

Leetcode—1099.小于K的两数之和【简单】Plus

2023每日刷题&#xff08;六十八&#xff09; Leetcode—1099.小于K的两数之和 实现代码 class Solution { public:int twoSumLessThanK(vector<int>& nums, int k) {int n nums.size();int left 0, right n - 1;int sum 0;int ans 0;sort(nums.begin(), nums…

讲座思考 | 周志华教授:新型机器学习神经元模型的探索

12月22日&#xff0c;有幸听了南京大学周志华教授题为“新型机器学习神经元模型的探索”的讲座。现场热闹非凡&#xff0c;大家像追星一样拿着“西瓜书”找周教授签名。周教授讲得依旧循循善诱&#xff0c;由浅入深&#xff0c;听得我很入迷&#xff0c;故作此记。 周教授首先就…