本文主要用作参考,请以自己的实际项目为准。
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
成功运行,更新完毕。