You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Ionic 7原生依赖安装错误及Capacitor配置修复求助

avatar
API 探路者
2026-7-24
问题描述
  • 刚接触Ionic应用开发，跟着9年前的过时视频尝试使用Ionic Native Cordova功能，遭遇大量错误
  • 调研后发现Cordova已停止维护，项目中安装了一堆过时依赖，但作为新手不清楚该移除哪些旧文件及操作方法
  • 安装Capacitor时遇到连锁依赖错误，最终目标是实现调用手机相机拍照，并将照片关联到应用内其他信息
  • 已折腾4天，尝试修改package.json中的rxjs版本但无效，附上最新安装错误信息和当前package.json内容
最新安装错误信息 
npm install @awesome-cordova-plugins/core --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular/common@15.2.6
npm ERR! Found: rxjs@5.5.12
npm ERR! node_modules/rxjs
npm ERR!   peer rxjs@"^5.5.0 || ^6.5.0" from @ionic-native/core@5.36.0
npm ERR!   node_modules/@ionic-native/core
npm ERR!     peer @ionic-native/core@"^5.1.0" from @ionic-native/social-sharing@5.36.0
npm ERR!     node_modules/@ionic-native/social-sharing
npm ERR!       @ionic-native/social-sharing@"^5.36.0" from the root project
npm ERR!   peer rxjs@"^5.5.0 || ^6.5.0" from @ionic-native/social-sharing@5.36.0
npm ERR!   node_modules/@ionic-native/social-sharing
npm ERR!     @ionic-native/social-sharing@"^5.36.0" from the root project
npm ERR!   2 more (the root project, @awesome-cordova-plugins/core)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"^6.5.3 || ^7.4.0" from @angular/common@15.2.6
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"15.2.6" from @angular/forms@15.2.6
npm ERR!   node_modules/@angular/forms
npm ERR!     peer @angular/forms@">=12.0.0" from @ionic/angular@6.7.2
npm ERR!     node_modules/@ionic/angular
npm ERR!       @ionic/angular@"^6.1.9" from the root project
npm ERR!     1 more (the root project)
npm ERR!   peer @angular/common@"15.2.6" from @angular/platform-browser@15.2.6
npm ERR!   node_modules/@angular/platform-browser
npm ERR!     peer @angular/platform-browser@"15.2.6" from @angular/forms@15.2.6
npm ERR!     node_modules/@angular/forms
npm ERR!       peer @angular/forms@">=12.0.0" from @ionic/angular@6.7.2
npm ERR!       node_modules/@ionic/angular
npm ERR!       1 more (the root project)
npm ERR!     3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!   3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!
npm ERR! Conflicting peer dependency: rxjs@7.8.0
npm ERR! node_modules/rxjs
npm ERR!   peer rxjs@"^6.5.3 || ^7.4.0" from @angular/common@15.2.6
npm ERR!   node_modules/@angular/common
npm ERR!     peer @angular/common@"15.2.6" from @angular/forms@15.2.6
npm ERR!     node_modules/@angular/forms
npm ERR!       peer @angular/forms@">=12.0.0" from @ionic/angular@6.7.2
npm ERR!       node_modules/@ionic/angular
npm ERR!         @ionic/angular@"^6.1.9" from the root project
npm ERR!       1 more (the root project)
npm ERR!     peer @angular/common@"15.2.6" from @angular/platform-browser@15.2.6
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"15.2.6" from @angular/forms@15.2.6
npm ERR!       node_modules/@angular/forms
npm ERR!         peer @angular/forms@">=12.0.0" from @ionic/angular@6.7.2
npm ERR!         node_modules/@ionic/angular
npm ERR!         1 more (the root project)
npm ERR!       3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!     3 more (@angular/platform-browser-dynamic, @angular/router, 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.
当前package.json内容 
{
  "name": "groceries2",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@capacitor/android": "^4.7.3",
    "@capacitor/app": "4.1.1",
    "@capacitor/core": "4.7.1",
    "@capacitor/haptics": "4.1.0",
    "@capacitor/ios": "^4.7.3",
    "@capacitor/keyboard": "4.1.1",
    "@capacitor/status-bar": "4.1.1",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic/angular": "^6.1.9",
    "ionic-native": "^2.9.0",
    "ionicons": "^6.0.3",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "^15.0.0",
    "@angular-eslint/eslint-plugin": "^15.0.0",
    "@angular-eslint/eslint-plugin-template": "^15.0.0",
    "@angular-eslint/schematics": "^15.0.0",
    "@angular-eslint/template-parser": "^15.0.0",
    "@angular/cli": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@angular/language-service": "^15.0.0",
    "@capacitor/cli": "4.7.1",
    "@ionic/angular-toolkit": "^8.0.0",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "cordova-android": "^10.1.2",
    "cordova-ios": "^6.2.0",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-x-socialsharing": "^6.0.4",
    "es6-promise-plugin": "^4.2.2",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~4.3.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.8.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    }
  }
}
解决方案

1. 清理过时的Cordova依赖

项目同时混合了Capacitor和过时的Cordova/Ionic Native依赖，这是冲突的核心。先彻底移除所有旧的Cordova相关包：

# 移除Ionic Native旧包
npm uninstall @ionic-native/social-sharing ionic-native
# 移除所有Cordova插件和平台
npm uninstall cordova-android cordova-ios cordova-plugin-device cordova-plugin-ionic-keyboard cordova-plugin-ionic-webview cordova-plugin-splashscreen cordova-plugin-statusbar cordova-plugin-x-socialsharing es6-promise-plugin

同时删除项目根目录下的cordova文件夹（如果存在）。

2. 修复rxjs依赖冲突

错误显示@angular/common@15需要rxjs@^6.5.3 || ^7.4.0，清理旧依赖后，将rxjs升级到符合要求的版本：

npm install rxjs@~7.8.0 --save

3. 改用Capacitor官方Camera插件实现拍照功能

既然Cordova已停止维护，直接使用Capacitor的官方Camera插件替代，无需依赖Cordova：

# 安装Capacitor Camera插件
npm install @capacitor/camera
# 同步到Android/iOS项目
npx cap sync

4. 在组件中调用相机

在需要拍照的组件中导入并使用Camera插件：

import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

async takePhoto() {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: false,
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera
  });

  // image.webPath为图片本地路径，可用于显示或后续关联应用内信息
  const imageUrl = image.webPath;
  // 在这里编写照片与应用内信息关联的逻辑
}

5. 处理剩余依赖警告

如果安装过程中仍有peer依赖警告，可临时使用--legacy-peer-deps参数跳过：

npm install --legacy-peer-deps

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.24 17:55:02