Angular 11到升级到 Angular 16

news2025/1/18 8:25:46

日新月异,与时俱进…
随着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.coloradmin.cn/o/1331263.html

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

相关文章

Ubuntu 常用命令之 cal 命令用法介绍

📑Linux/Ubuntu 常用命令归类整理 cal命令在Ubuntu系统下用于显示日历。它可以显示任何特定月份或整个年份的日历。 cal命令的参数如下 -1:只显示当前月份的日历。-3:显示前一个月、当前月和下一个月的日历。-s:指定日历的开始…

力扣思维题——寻找重复数

题目链接:https://leetcode.cn/problems/find-the-duplicate-number/description/?envTypestudy-plan-v2&envIdtop-100-liked 这题的思维难度较大。一种是利用双指针法进行计算环的起点,这种方法在面试里很难说清楚,也很难想到。大致做…

MyBatis中延迟加载,全局和局部的开启使用与关闭

文章目录 MyBatis中延迟加载,全局和局部的开启使用与关闭1、问题提出2、延迟加载和立即加载延迟加载立即加载 3、三种对应的表关系中的加载4、打开全局延迟加载(实现一对一的延迟加载)5、实现一对多的延迟加载(将上面设置的全局延…

Flink 数据序列化

为 Flink 量身定制的序列化框架 大家都知道现在大数据生态非常火,大多数技术组件都是运行在JVM上的,Flink也是运行在JVM上,基于JVM的数据分析引擎都需要将大量的数据存储在内存中,这就不得不面临JVM的一些问题,比如Ja…

thinkphp+vue+mysql酒店客房管理系统 b1g8z

本系统包括前台界面、用户界面和管理员界面、员工界面。在前台界面里游客和用户可以浏览客房信息、公告信息等,用户可以预定客房,在用户中心界面里,用户可以管理预定信息,管理员负责用户预定的审核以及客房的发布、用户的入住等。…

装饰者模式学习

装饰器(Decorator)模式的定义:指在不改变现有对象结构的情况下,动态地给该对象增加一些职责(即增加其额外功能)的模式,它属于对象结构型模式。 装饰器模式的主要优点有: 装饰器是继…

基于Java (spring-boot)的在线考试管理系统

一、项目介绍 系统功能说明 1、系统共有管理员、老师、学生三个角色,管理员拥有系统最高权限。 2、老师拥有考试管理、题库管理、成绩管理、学生管理四个模块。 3、学生可以参与考试、查看成绩、试题练习、留言等功能 二、作品包含 三、项目技术 后端语言&#xff1…

【电路笔记】-串联电容器

串联电容器 文章目录 串联电容器1、概述2、示例13、示例34、总结 当电容器以菊花链方式连接在一条线上时,它们就串联在一起。 1、概述 对于串联电容器,流过电容器的充电电流 ( i C i_C iC​ ) 对于所有电容器来说都是相同的,因为它只有一条…

Unity中Shader缩放矩阵

文章目录 前言一、直接相乘缩放1、在属性面板定义一个四维变量,用xyz分别控制在xyz轴上的缩放2、在常量缓存区申明该变量3、在顶点着色器对其进行相乘,来缩放变换4、我们来看看效果 二、使用矩阵乘法代替直接相乘缩放的原理1、我们按如下格式得到缩放矩阵…

Koordinator 支持 K8s 与 YARN 混部,小红书在离线混部实践分享

作者:索增增(小红书)、宋泽辉(小红书)、张佐玮(阿里云) 背景介绍 Koordinator 是一个开源项目,基于阿里巴巴在容器调度领域多年累积的经验孵化诞生,目前已经支持了 K8s…

LZ码基本概念

LZ码是一种无损压缩算法,由Lempel和Ziv两位计算机科学家提出并命名。它是一种基于字典的压缩方法,可以将数据有效地压缩存储,同时实现高效的解压缩。 LZ码的基本概念是利用字典来存储先前遇到的字符串,然后用较短的代表符号来表示…

【性能优化】MySql数据库查询优化方案

阅读本文你的收获 了解系统运行效率提升的整体解决思路和方向学会MySQl中进行数据库查询优化的步骤学会看慢查询、执行计划、进行性能分析、调优 一、问题:如果你的系统运行很慢,你有什么解决方案? ​关于这个问题,我们通常首先…

mac上使用 Downie 下载网页视频

在今天的数字时代,视频内容在互联网上的传播变得更加普遍和便捷。然而,有时我们可能希望将网页上的视频保存在本地,以便离线观看或与他人分享。Downie 是一款强大而简便的工具,专门设计用于下载网页上的视频内容。本文将介绍 Down…

IP技术在网络安全防护中的重要意义

随着互联网的普及,网络安全问题日益凸显。作为网络通信中的重要标识,IP地址在网络安全防护中扮演着关键角色。近日,一则关于IP技术在网络安全防护措施的新闻引起了广泛关注。 据报道,IP技术已成为网络安全防护的重要手段之一。通过…

idea structure视图介绍

作用 idea的Structure视图可以辅助查看代码结构 如何呼出Structure视图? Alt 7 Ctrl F12 侧边栏点Structure 我的常用配置 1、选Show Toolbar,便于使用功能按钮 2、使用Float视图,悬浮于窗口表面,可以使用 ShiftEsc来退出…

学习使用echarts图表中formatter的用法,格式化数字金额,控制x轴、y轴展示长度

学习使用echarts图表中formatter的用法,格式化数字金额,控制x轴、y轴展示长度 控制金额长度两位小数,并去除多余.00效果图 控制文字长度完整代码 控制金额长度 series: [{name: ,type: bar,sort: none,label: { //饼图图形上的文本…

DFS与BFS算法总结

知识概览 DFS、BFS都可以对整个问题空间进行搜索,搜索的结构都是像一棵树。DFS会尽可能往深搜,当搜索到叶节点时就会回溯。而BFS每一次只会扩展一层。 DFS与BFS的区别: 搜索方式数据结构空间复杂度性质DFS栈O(h),其中h为搜索空间…

Linux数据库主从复制(单主单从)

MySQL主从复制的优点包括: 1、横向扩展解决方案 - 在多个从站之间分配负载以提高性能。在此环境中,所有写入和更新都必须在主服务器上进行。但是,读取可以在一个或多个从设备上进行。该模型可以提高写入性能(因为主设备专用于更新…

PMP项目管理 - 成本管理

系列文章目录 系统架构设计 PMP项目管理 - 整合管理 PMP项目管理 - 范围管理 PMP项目管理 - 质量管理 PMP项目管理 - 采购管理 PMP项目管理 - 资源管理 PMP项目管理 - 风险管理 PMP项目管理 - 沟通管理 现在的一切都是为将来的梦想编织翅膀,让梦想在现实中展翅高飞…

只用10分钟,ChatGPT就帮我写了一篇2000字文章

有了ChatGPT之后,于我来说,有两个十分明显的变化: 1. 人变的更懒 因为生活、工作中遇到大大小小的事情,都可以直接找ChatGPT来寻求答案。 2. 工作产出量更大 之前花一天,甚至更久才能写一篇原创内容,现…