Angular 14安装NgRx 13.2.0触发依赖冲突如何解决

问题描述 #

完成旧项目从Angular v8到Angular 14的版本升级后，当前项目安装的NgRx包版本为13.2.0，该版本声明的peer依赖要求为Angular 13环境，执行npm i命令时抛出ERESOLVE依赖解析错误，错误详情如下：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @ngrx/effects@13.2.0
npm ERR! Found: @angular/core@14.0.2
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^14.0.2" from the root project
npm ERR!   peer @angular/core@"14.0.2" from @angular/animations@14.0.2
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"^14.0.2" from the root project
npm ERR!     peerOptional @angular/animations@"14.0.2" from @angular/platform-browser@14.0.2
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       @angular/platform-browser@"^14.0.2" from the root project
npm ERR!       3 more (@angular/forms, @angular/platform-browser-dynamic, @angular/router)
npm ERR!   12 more (@angular/common, @angular/compiler, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^13.0.0" from @ngrx/effects@13.2.0
npm ERR! node_modules/@ngrx/effects
npm ERR!   @ngrx/effects@"^13.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@13.3.11
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"^13.0.0" from @ngrx/effects@13.2.0
npm ERR!   node_modules/@ngrx/effects
npm ERR!     @ngrx/effects@"^13.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

约束前提：不回退Angular 13版本，不使用--force参数，寻找合规可行的解决方案。

合规解决方案 #

NgRx官方版本对齐规则与Angular完全一致，即NgRx的大版本号必须和项目使用的Angular大版本号保持一致，才会满足peer依赖要求，不存在跨大版本的兼容支持。因此不需要回退Angular版本，也不需要使用强制安装参数，直接将所有NgRx相关依赖升级到14.x大版本即可解决冲突，操作步骤如下：

• 第一步：卸载项目内所有已安装的NgRx生态包，避免旧版本残留导致的后续冲突，执行命令：

npm uninstall @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store @ngrx/entity @ngrx/data @ngrx/component-store

项目中引用的其他NgRx生态包，需要一并加入卸载列表。

• 第二步：重新安装与Angular 14版本匹配的14.x系列NgRx包，执行命令：

npm install @ngrx/store@14 @ngrx/effects@14 @ngrx/store-devtools@14

项目实际用到的其他NgRx包统一追加在命令后，统一指定@14的大版本标签即可，npm会自动拉取14大版本下最新的稳定版，自动匹配Angular 14的peer依赖要求，不会再触发ERESOLVE错误。

• 第三步：版本适配（绝大多数场景无需改动）。NgRx 13到14版本的破坏性变更极少，升级完成后如果出现少量类型报错或API调用报错，对照官方变更说明微调对应代码即可正常运行。

注意：不推荐使用--legacy-peer-deps参数绕过依赖校验，该方案本质是强行安装不满足peer依赖要求的包，后续运行过程中可能出现不可预知的运行时错误、类型不兼容问题，不属于合规解决方案。

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