Angular升级17.3.0至20.0.6记录

本文主要用作参考,请以自己的实际项目为准。

Angular官方升级手册

点击标题即可跳转至Angular升级专用的官方指导手册

你可以根据自己的使用情况判断在你升级前、升级后分别有什么必须要处理的工作。

npm-check-updates

npm-check-updates是一个升级将项目package.json依赖一键升级到最新版本的npm工具。

在项目中输入以下指令来进行全局安装

shell 复制代码
npm install -g npm-check-updates

运行以下指令来查看需要更新的依赖列表

shell 复制代码
ncu -u

以花墨为例:

shell 复制代码
PS C:\Users\44684\Desktop\FlowersInkV2> ncu -u
Upgrading C:\Users\44684\Desktop\FlowersInkV2\package.json
[====================] 35/35 100%

 @angular-devkit/build-angular       ^17.3.6  →   ^20.0.5
 @angular/animations                 ^17.3.0  →   ^20.0.6
 @angular/cli                        ^17.3.6  →   ^20.0.5
 @angular/common                     ^17.3.0  →   ^20.0.6
 @angular/compiler                   ^17.3.0  →   ^20.0.6
 @angular/compiler-cli               ^17.3.0  →   ^20.0.6
 @angular/core                       ^17.3.0  →   ^20.0.6
 @angular/forms                      ^17.3.0  →   ^20.0.6
 @angular/platform-browser           ^17.3.0  →   ^20.0.6
 @angular/platform-browser-dynamic   ^17.3.0  →   ^20.0.6
 less-loader                         ^12.2.0  →   ^12.3.0
 mermaid                             ^10.9.1  →   ^11.7.0
 ng-zorro-antd                       ^17.4.1  →   ^20.0.0
 ngx-markdown                        ^17.0.0  →   ^20.0.0
 prismjs                             ^1.29.0  →   ^1.30.0
 rxjs                                 ~7.8.0  →    ~7.8.2
 tslib                                ^2.3.0  →    ^2.8.1
 typescript                           ~5.4.2  →    ~5.8.3
 zone.js                             ~0.14.3  →   ~0.15.1
Run npm install to install new versions.

之后输入npm install安装更新,如果一切顺利,在npm install结束之后就OK了。

但我在几次Angular项目更新的时候都遇到了同样的报错,与@angular-devkit/build-angular有关,故记录一下对应的解决方案。

npm install报错

报错信息如下

shell 复制代码
PS C:\Users\44684\Desktop\FlowersInkV2> npm install
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: flowers-ink-v2@0.0.0
npm error Found: @angular-devkit/build-angular@17.3.11
npm error   dev @angular-devkit/build-angular@"^20.0.5" from the root project
npm error
npm error Could not resolve dependency:
npm error dev @angular-devkit/build-angular@"^20.0.5" from the root project
npm error
npm error Conflicting peer dependency: @angular/compiler-cli@20.0.6
npm error node_modules/@angular/compiler-cli
npm error   peer @angular/compiler-cli@"^20.0.0" from @angular-devkit/build-angular@20.0.5
npm error   node_modules/@angular-devkit/build-angular
npm error     dev @angular-devkit/build-angular@"^20.0.5" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\44684\AppData\Local\npm-cache\_logs\2025-07-03T08_57_19_511Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\44684\AppData\Local\npm-cache\_logs\2025-07-03T08_57_19_511Z-debug-0.log

我不太确定报错的原因,我理解的是@angular/compiler-cli @angular-devkit/build-angular无法同时同步更新造成的。

按照以下步骤,我可以成功完成升级,仅供参考。

在开始安装之前,请尽可能的备份整个项目。

清理依赖环境

手动删除node_modules文件夹和package-lock.json文件

如果编译器(例如VsCode)删除太过缓慢,可以右键-打开文件夹所在位置,在Windows资源管理器中删除会更快。

强制安装依赖

请注意这一步骤

如果你的项目框架太多,这一步一定要做好齐全的备份!

我曾经这样更新过一个Angular11项目,同时安装了Fuse、Ng-Zorro、Angular-Material、DevUI四种框架,强制安装依赖后项目完全无法正常使用,只能删除后重新拉取代码并重新安装依赖。

输入以下指令

shell 复制代码
npm install --legacy-peer-deps --force

--legacy-peer-deps可以忽略 peerDependency 冲突,--force可以覆盖版本不匹配问题(但项目能不能运行,它就不管了)

升级 Angular CLI 全局包

输入一下指令

shell 复制代码
npm install -g @angular/cli@20.0.5

安装Angular的核心

执行Angular迁移

shell 复制代码
ng update @angular/core @angular/cli --allow-dirty --force

该指令会自动修复项目配置文件和代码兼容性问题

但我进行到这一步的时候出现了报错

shell 复制代码
PS C:\Users\44684\Desktop\FlowersInkV2> ng update @angular/core @angular/cli --allow-dirty --force
Node.js version v22.10.0 detected.
The Angular CLI requires a minimum Node.js version of v20.19 or v22.12.

Please update your Node.js version or visit https://nodejs.org/ for additional instructions.

处理方式也很简单,我的本地nodejs版本是v22.10.0,升级至v22.12.0即可(按照提示,v20.19.0也可以)

验证更新

shell 复制代码
ng serve

成功运行,更新完毕。

相关推荐
薛定谔的算法12 分钟前
# 前端路由进化史:从白屏到丝滑体验的技术突围
前端·react.js·前端框架
拾光拾趣录1 小时前
Element Plus表格表头动态刷新难题:零闪动更新方案
前端·vue.js·element
Adolf_19932 小时前
React 中 props 的最常用用法精选+useContext
前端·javascript·react.js
前端小趴菜052 小时前
react - 根据路由生成菜单
前端·javascript·react.js
喝拿铁写前端2 小时前
`reduce` 究竟要不要用?到底什么时候才“值得”用?
前端·javascript·面试
鱼樱前端2 小时前
2025前端SSR框架之十分钟快速上手Nuxt3搭建项目
前端·vue.js
極光未晚2 小时前
React Hooks 中的时空穿梭:模拟 ComponentDidMount 的奇妙冒险
前端·react.js·源码
Codebee2 小时前
OneCode 3.0 自治UI 弹出菜单组件功能介绍
前端·人工智能·开源
ui设计兰亭妙微2 小时前
# 信息架构如何决定搜索效率?
前端
1024小神3 小时前
Cocos游戏中UI跟随模型移动,例如人物头上的血条、昵称条等
前端·javascript