如何在中大型项目中全量更新npm包？Angular11升12依赖冲突解决

操作存在的问题 #

1. 执行ng update时提示找不到@angular/core依赖，大概率是命令执行目录不在项目根目录（package.json所在目录），或是全局安装的Angular CLI版本和本地项目版本不匹配，导致CLI无法正常识别项目依赖。
2. 直接手动执行npm install安装Angular 12核心包的操作不符合升级逻辑：Angular生态的周边库（如@angular/cdk、@ngrx、ng-select等）都和Angular主版本强绑定，仅升级主包不升级对应周边库，必然出现对等依赖冲突，你收到的报错就是@ng-select/ng-select@6.x仅支持Angular 11、不兼容Angular 12导致的。
3. 直接使用npm-check-updates全量更新所有包的操作风险很高：大量第三方包跨版本存在破坏性变更，直接更新到最新版不仅会和当前Angular版本不兼容，还会出现大量语法、API不兼容的问题，很难排查定位。

正确升级步骤 #

第一步：清理错误操作残留 #

• 删除项目根目录下的node_modules文件夹和package-lock.json文件，消除之前错误安装的依赖残留。
• 确认命令行当前工作目录就是项目根目录（和package.json同路径）。

第二步：执行官方Angular升级命令 #

优先使用对应版本的本地CLI执行升级，避免全局版本差异导致的识别问题：

npx @angular/cli@12 update @angular/core@12 @angular/cli@12

该命令会自动匹配Angular核心包、CLI的兼容版本，同时自动修改angular.json、tsconfig等配置文件的版本适配性变更。如果执行时仍提示找不到依赖，先执行npm install安装完当前所有依赖后再重试升级命令。

第三步：同步升级Angular生态绑定的周边包 #

你当前package.json中存在大量仍停留在Angular 11版本的周边库，需要对应升级到支持Angular 12的兼容版本，参考版本如下：

• @angular/cdk、@angular/material 升级到^12.2.13
• @ng-select/ng-select 升级到^7.4.0
• 所有@ngrx/开头的包（effects、router-store、store、store-devtools、schematics）升级到^12.5.1
• ng2-date-picker 升级到^12.0.0
• ngx-cookie-service 升级到^12.0.3
• ngx-infinite-scroll 升级到^11.1.0
• ngx-webstorage 升级到^8.0.0
• ngrx-store-localstorage 升级到^12.0.0
• 所有@storybook/开头的包升级到^6.3.12（该版本才开始兼容Angular 12）

第四步：安装依赖并验证功能 #

执行npm install完成依赖安装，如果仍有少量不影响运行的对等依赖警告，可以追加--legacy-peer-deps参数临时兼容。安装完成后执行ng serve启动项目，排查修复编译错误和功能异常，确认项目可正常运行。

第五步：全量更新剩余npm包（可选） #

项目稳定运行后，再执行npx npm-check-updates -u升级剩余非强绑定的第三方包，建议每次少量升级，升级后立即测试功能，避免一次性出现大量问题难以排查。如果出现依赖冲突，查询对应包的版本兼容说明，选择同时适配当前Angular版本和其他依赖的版本安装即可。

内容的提问来源于stack exchange，提问作者Andy88