Ionic5执行ionic cordova platform add android时npm依赖冲突报错

问题场景 #

我有一个Ionic5移动端项目，已成功执行npm install命令，但运行ionic cordova platform add android时出现依赖冲突错误。

错误日志 #

sudo ionic cordova platform add android 
> cordova platform add android
Using cordova-fetch for cordova-android
Failed to fetch platform cordova-android
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
CordovaError: Error: Command failed with exit code 1: npm install cordova-android --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @angular/animations@10.2.5
npm ERR! Found: @angular/core@9.1.13
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"9.1.13" from @angular/common@9.1.13
npm ERR!   node_modules/@angular/common
npm ERR!     peer @angular/common@"^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0" from @angular/fire@6.1.5
npm ERR!     node_modules/@angular/fire
npm ERR!       @angular/fire@"^6.0.2" from the root project
npm ERR!     peer @angular/common@"9.1.13" from @angular/forms@9.1.13
npm ERR!     node_modules/@angular/forms
npm ERR!       peer @angular/forms@">=8.2.7" from @ionic/angular@5.9.4
npm ERR!       node_modules/@ionic/angular
npm ERR!         @ionic/angular@"^5.0.0" from the root project
npm ERR!       1 more (the root project)
npm ERR!     4 more (@angular/platform-browser, ...)
npm ERR!   peer @angular/core@"^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0" from @angular/fire@6.1.5
npm ERR!   node_modules/@angular/fire
npm ERR!     @angular/fire@"^6.0.2" from the root project
npm ERR!   8 more (@angular/forms, @angular/platform-browser, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"10.2.5" from @angular/animations@10.2.5
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"^10.0.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/core@10.2.5
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"10.2.5" from @angular/animations@10.2.5
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"^10.0.2" 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.
npm ERR! 

环境信息 #

• MacOS Ventura
• NodeJs v18.16.0
• Npm 9.6.7
• Ionic -v:7.1.1

package.json依赖配置 #

"dependencies": {
    "@angular/animations": "^10.2.5",
    "@angular/common": "~10.2.5",
    "@angular/core": "~10.2.5",
    "@angular/fire": "^6.0.2",
    "@angular/forms": "~10.2.5",
    "@angular/platform-browser": "~10.2.5",
    "@angular/platform-browser-dynamic": "~10.2.5",
    "@angular/router": "~10.2.5",
    "@awesome-cordova-plugins/core": "^5.45.0",
    "@capacitor/core": "2.2.1",
    "@ionic-native/core": "^5.0.7",
    "@ionic-native/geolocation": "^5.27.0",
    "@ionic-native/globalization": "^5.27.0",
    "@ionic-native/google-maps": "^5.5.0",
    "@ionic-native/in-app-browser": "^5.27.0",
    "@ionic-native/market": "^5.27.0",
    "@ionic-native/network": "^5.27.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/sqlite": "^5.27.0",
    "@ionic-native/sqlite-porter": "^5.27.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.9.4",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^4.0.0",
    "compare-func": "^2.0.0",
    "cordova-android": "~7.0.0",
    "cordova-androidx-build": "^1.0.4",
    "cordova-ios": "^5.1.1",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-globalization": "^1.11.0",
    "cordova-plugin-googlemaps": "github:mapsplugin/cordova-plugin-googlemaps#multiple_maps",
    "cordova-plugin-googlemaps-sdk": "github:mapsplugin/cordova-plugin-googlemaps-sdk",
    "cordova-plugin-inappbrowser": "^4.0.0",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-sqlite-storage": "^5.0.0",
    "firebase": "^7.15.5",
    "rxjs": "~6.5.1",
    "tslib": "^2.0.0",
    "uk.co.workingedge.cordova.plugin.sqliteporter": "^1.1.1",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.4",
    "@angular/cli": "10.2.4",
    "@angular/compiler": "~10.2.5",
    "@angular/compiler-cli": "~10.2.5",
    "@angular/language-service": "~10.2.5",
    "@capacitor/cli": "2.2.1",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "cordova-plugin-device": "^2.1.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.8"
  }

已尝试的操作 #

• 更换不同版本的Angular、NodeJs和Ionic
• 完全卸载所有npm包和NodeJs
• 删除package.json
• 删除node_module目录
• 清理npm缓存
• 重新执行npm install（执行成功）

疑问 #

明明在package.json中指定的是@angular/core@~10.2.5，但错误日志中却检测到@angular/core@9.1.13，请求解决方案。

解决方案 #

1. 问题根源 #

npm 7+版本默认开启严格peer依赖校验，你的项目中@angular/fire@6.1.5允许依赖Angular 9-12版本，导致安装过程中可能拉取了Angular 9的子依赖，与你指定的Angular 10版本产生冲突。

2. 临时快速解决 #

直接在添加平台时跳过peer依赖校验：

sudo ionic cordova platform add android -- --legacy-peer-deps

或者先单独安装cordova-android：

npm install cordova-android --save-dev --legacy-peer-deps

再执行添加平台命令。

3. 彻底解决：统一依赖版本 #

• 锁定所有Angular包的精确版本：将package.json中所有~10.2.5改为10.2.5，避免版本浮动拉取旧版依赖。
• 清理并重新安装依赖：

rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

之后再尝试添加Android平台。

4. 适配CLI版本 #

你的Ionic CLI版本（7.1.1）与项目的Ionic 5版本跨度太大，建议降级CLI到匹配版本：

npm install -g @ionic/cli@6

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