0

I have just started learning to make apps in Ionic, and I am trying to learn how to use the ionic native cordova functions. This is part of a class, and the videos provided for the class are 9 years out of date. I tried to go by them, encountered numerous errors, and then began doing my own research and found that cordova has been discontinued, so the folder has some out of date things installed. Unfortunately because I am just now trying to learn I don't know how to remove these old files or what I should remove. I need instructions on what to remove and how as well as what I need to do in order to resolve the cascade of errors that I'm getting when I try to install capacitor. My end goal is to be able to use the phone's camera with my app to take pictures and associate them with some other information in the app. Note that I've been trying to make this work for 4 days now so I can't recall all I've tried, but it's everything I could google on the subject. The latest attempt was changing the package.json file to make it use the version of rxjs that it seemed to want, but that didn't seem to help. Here is the latest attempt and its errors:

npm install @awesome-cordova-plugins/core --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/rxjs
npm ERR!   peer rxjs@"^5.5.0 || ^6.5.0" from @ionic-native/[email protected]
npm ERR!   node_modules/@ionic-native/core
npm ERR!     peer @ionic-native/core@"^5.1.0" from @ionic-native/[email protected]
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/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"15.2.6" from @angular/[email protected]
npm ERR!   node_modules/@angular/forms
npm ERR!     peer @angular/forms@">=12.0.0" from @ionic/[email protected]
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/[email protected]
npm ERR!   node_modules/@angular/platform-browser
npm ERR!     peer @angular/platform-browser@"15.2.6" from @angular/[email protected]
npm ERR!     node_modules/@angular/forms
npm ERR!       peer @angular/forms@">=12.0.0" from @ionic/[email protected]
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: [email protected]
npm ERR! node_modules/rxjs
npm ERR!   peer rxjs@"^6.5.3 || ^7.4.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/common
npm ERR!     peer @angular/common@"15.2.6" from @angular/[email protected]
npm ERR!     node_modules/@angular/forms
npm ERR!       peer @angular/forms@">=12.0.0" from @ionic/[email protected]
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/[email protected]
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"15.2.6" from @angular/[email protected]
npm ERR!       node_modules/@angular/forms
npm ERR!         peer @angular/forms@">=12.0.0" from @ionic/[email protected]
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.

and the 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": {}
    }
  }
}
2
  • 1
    It's not the best practice, but for the tutorial you can simply do this trick : npm i --legacy-peer-deps. Commented Apr 14, 2023 at 4:44
  • If your end goal is to use the camera with an ionic app, use the capacitor plugin : check it out there capacitorjs.com/docs/apis/camera cordova plugin can be used but if there is a capacitor plugin, it will be easier to implement. Also I'm not sure that the cordova plugin will be compatible with the just out version 7 of ionic. Commented Apr 14, 2023 at 14:56

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.