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
温馨提示:遇到上述这种,一定要同步更改代码哦,要不然会启动不起来~~~

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【ArduinoOTA无线(OTA)更新的EASY指南】

【ArduinoOTA无线(OTA)更新的EASY指南】 1. 前言2. 了解 ESP32 的 ArduinoOTA3. 无线更新案例4. ArduinoOTA入门5. 安装必备组件6. 设置硬件7. ESP32 OTA 的最低代码8. 按照我们的流程学习Arduino编程➜9. 这对OTA来说非常重要10. 通过无线方式将草图上传…

IIS服务器的配置与管理

1) 安装IIS服务器,并添加站点,该服务器的IP地址为192.168.1.xx 。 2) 配置网站,并设置该站点不允许匿名访问,仅允许使用自己的本地用户登录连接。 3) 配置网站,限制拒绝192.168.1.100IP地址访问 。 4) 客户端使用19…

【C++11特性篇】玩转C++11中的包装器(function&bind)

前言 大家好吖,欢迎来到 YY 滴C系列 ,热烈欢迎! 本章主要内容面向接触过C的老铁 主要内容含: 欢迎订阅 YY滴C专栏!更多干货持续更新!以下是传送门! 目录 一.为什么需要包装器function&#xff…

一篇文章带你搞定CTFMice基本操作

CTF比赛是在最短时间内拿到最多的flag,mice必须要有人做,或者一支战队必须留出一块时间专门写一些mice,web,pwn最后的一两道基本都会有难度,这时候就看mice的解题速度了! 说实话,这是很大一块&…

【ubuntu 22.04】安装vscode并配置正常访问应用商店

注意:要去vscode官网下载deb安装包,在软件商店下载的版本不支持输入中文 在ubuntu下用火狐浏览器无法访问vscode官网,此时可以手动进行DNS解析,打开DNS在线查询工具,解析以下主机地址(复制最后一个IP地址&a…

c++动态内存与智能指针

前言 静态内存:用于保存局部静态变量、类内的静态数据成员以及全局变量栈:用于保存函数内部的非static变量堆:存储动态分配的对象(程序运行时分配的对象) 静态内存和栈内存的对象由编译器自动创建和销毁 而堆区的动态…

​ 全球云科技基础设施:亚马逊云科技的海外服务器网络如何演进

在当今数字化浪潮愈发汹涌的时代,科技公司的发展不仅需要更强大的计算能力和创新性技术,还需要对环境的高度责任感。在这一背景下,亚马逊云科技的海外服务器产品成为了推动清洁、高效数字未来的领导者之一。亚马逊云科技的高级主管阿比谢克夏…

2024年开通抖店,相关注意事项,新手一定要注意这几个细节

我是王路飞。 马上2024年了,如果你在23年没开通抖店的话,那么2024年就一定不能再错过了。 今天给你们说下,在2024年开通抖店,新手需要注意的相关事项和细节。 内容来源于【醒醒团队-电商王路飞】 首先,开店的时候&a…

Unity中Shader观察空间推导(在Shader中实现)

文章目录 前言一、观察空间矩阵推导1、求观察空间基向量2、求观察空间的基向量在世界空间中的矩阵 的 逆矩阵2、求平移变换矩阵3、相乘得出 观察空间转化矩阵4、得到顶点的世界空间坐标,然后转化到观察空间5、把观察空间坐标转化为齐次裁剪坐标输出到屏幕 二、最终效…

测试开发体系介绍——测试体系介绍-L3

目录: 测试框架体系TDDDDTBDDATDD介绍 测试框架是什么?测试框架的价值:测试框架的收益:常见测试框架类型:TDDBDDBehaviorDrivenDevelopmentATDDAcceptanceTestDrivenDevelopmentMBTModelBasedTestingDDTDataDrivenTes…

HarmonyOS 签名打包Hap(s)、App(s)

1. 基本概念 HarmonyOS应用通过数字证书(.cer文件)和Profile文件(.p7b文件)来保证应用的完整性,数字证书和Profile文件可通过申请发布证书和Profile文件获取。   申请数字证书和Profile文件前,首先需要通…

mySQL数据库用户管理

目录 1.创建外键约束 外键的定义 主键表和外键表的理解 具体操作 2.数据库用户管理 新建用户 查看用户信息 重命名用户 删除用户 修改当前和其他用户登录密码 忘记 root密码的解决办法 3.数据库用户授权 授予权限 查看权限 撤销权限 1.创建外键约束 外键的定义…

又是阿里,通义灵码免费平替GitHub Copilot

毫无疑问,人工智能已经在影响着我们日常生活的方方面面,同样的在软件开发领域,AI正在改变我们的开发方式。在软件开发领域,尽管有许多强大的AI编码工具,但国产,免费,使用门槛低,用起…

Fastjson 常用语法

一.Json数据格式回顾 1.1 什么是json JSON:(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSO…

省时攻略:快速获得Creo安装包,释放创意天才!

不要再在网上浪费时间寻找Creo的安装包了,一键下载安装, 你要的一切都可以在这里找到!我们深知在海量的信息中寻找合适的软件包并非易事,而且往往还伴随着繁琐的安装过程。然而,现在有了我们,一切变得轻松简…

常见激活函数

激活函数是神经网络中的一种非线性变换,它在神经元的输出上引入了非线性性质,使神经网络能够更好地学习和适应复杂的数据模式。以下是一些常见的激活函数: Sigmoid 函数 Sigmoid 函数将输入映射到(0,1)之间…

模块与包、反序列化校验源码分析、断言、drf之请求、drf之响应

模块与包 什么是模块? 一个py文件,被别的py文件导入使用,它就是模块 如果py文件,直接右键运行,它叫脚本文件 什么是包? 一个文件夹,下有 __init__.py ,和很多py文件,这个…

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

📑Linux/Ubuntu 常用命令归类整理 SCP(Secure Copy)是一种基于SSH(Secure Shell)的文件传输协议,它可以在本地和远程主机之间安全地复制文件。在Ubuntu系统下,我们可以使用scp命令来实现这个功…

tcp 的限制 (TCP_WRAPPERS)

#江南的江 #每日鸡汤:青春是打开了就合不上的书,人生是踏上了就回不了头的路,爱情是扔出了就收不回的赌注。 #初心和目标:拿到高级网络工程师 TCP_WRAPPERs Tcp_wrappers 对于七层模型中是位于第四层的安全工具,他…

零成本搭建一款博客网站(基于Vercel+Hexo完美实现)【保姆级教程】

文章目录 🐸基于VercelHexo零成本搭建博客网站🐻实现思路 🐮Hexo的配置与安装🐒Hexo的美化与使用🐫Github的推送与部署🐼Vercel部署与网站上线🐛总结 🐸基于VercelHexo零成本搭建博客…