如何为Angular 14安装ngx-pinch-zoom？解决依赖冲突问题

问题描述 #

本地使用--legacy-peer-deps参数能成功安装ngx-pinch-zoom，但CI/CD流水线因peer依赖冲突失败。尝试了ngx-pinch-zoom和ngx-pinch-zoom-13，未找到适配Angular 14的版本，错误信息如下：

错误信息 #

npm ERR! 发现: @angular/common@14.1.3
npm ERR! node_modules/@angular/common
npm ERR!   根项目依赖 @angular/common@"^14.1.0"
npm ERR!   @angular/cdk@14.1.2 的peer依赖要求 @angular/common@"^14.0.0 || ^15.0.0"
npm ERR!   node_modules/@angular/cdk
npm ERR!     根项目依赖 @angular/cdk@"^14.1.2"
npm ERR!     @angular/material@14.1.2 的peer依赖要求 @angular/cdk@"14.1.2"
npm ERR!     node_modules/@angular/material
npm ERR!       根项目依赖 @angular/material@"^14.1.1"
npm ERR!   另有7个依赖（@angular/forms、@angular/material等）依赖该包
npm ERR! 
npm ERR! 无法解析依赖:
npm ERR! ngx-pinch-zoom-13@2.5.6 的peer依赖要求 @angular/common@"~13.2.1"
npm ERR! node_modules/ngx-pinch-zoom-13
npm ERR!   根项目依赖 ngx-pinch-zoom-13@"^2.5.6"
npm ERR! 
npm ERR! 冲突的peer依赖: @angular/common@13.2.7
npm ERR! node_modules/@angular/common
npm ERR!   ngx-pinch-zoom-13@2.5.6 的peer依赖要求 @angular/common@"~13.2.1"
npm ERR!   node_modules/ngx-pinch-zoom-13
npm ERR!     根项目依赖 ngx-pinch-zoom-13@"^2.5.6"

解决方案 #

1. 在CI/CD流水线中添加--legacy-peer-deps参数 #

修改CI脚本中的安装命令，和本地安装逻辑保持一致：

npm install --legacy-peer-deps

若使用yarn，对应参数为--legacy-peer-deps（yarn 2+版本），可根据实际版本调整。

2. 使用npm依赖覆盖功能（npm 8.3及以上版本支持） #

在项目package.json中添加overrides字段，强制让ngx-pinch-zoom-13使用当前项目的@angular/common版本，绕过peer依赖检查：

{
  "overrides": {
    "ngx-pinch-zoom-13": {
      "@angular/common": "$@angular/common"
    }
  }
}

添加后重新执行安装命令，CI流水线无需额外参数即可正常安装。

3. 自行适配Angular 14版本 #

若官方无适配版本，可fork原项目，修改package.json中的peer依赖配置，将@angular/common的要求改为^14.0.0，之后将修改后的包发布到私有npm仓库，或直接本地安装修改后的包：

npm install /path/to/your/forked-ngx-pinch-zoom

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