Problem with Angular dependencies

Ionic Framework Ionic Angular
1

So, I’m going to be responsible for a project at my college that was made with versions 14.15.1 of NodeJS and 5.14.16 of Ionic and I’m having problems with some Angular dependencies when I use the npm install command. These errors appear here:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: Analise-Sensorial-app2.0@0.0.1
npm ERR! Found: @angular/core@10.0.14
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"~10.0.0" from the root project
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! 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.

How do I resolve this?
The package.json file looks like this:

{
  "name": "Analise-Sensorial-app2.0",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.0.2",
    "@angular/common": "~10.0.14",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/platform-browser": "~10.2.14",
    "@angular/platform-browser-dynamic": "~10.2.14",
    "@angular/router": "~10.0.0",
    "@ionic-native/camera": "^5.29.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/file": "^5.29.0",
    "@ionic-native/file-path": "^5.29.0",
    "@ionic-native/file-transfer": "^5.29.0",
    "@ionic-native/full-screen-image": "^5.29.0",
    "@ionic-native/native-page-transitions": "^5.30.0",
    "@ionic-native/photo-viewer": "^5.29.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/pwa-elements": "^3.0.1",
    "bootstrap": "^5.0.0-beta1",
    "chart.js": "^3.7.1",
    "chartjs-plugin-datalabels": "^2.1.0",
    "cordova": "^10.0.0",
    "cordova-android": "9.0.0",
    "ngx-chips": "^2.2.2",
    "platform": "1.3.6",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.0",
    "@angular/cli": "~10.0.5",
    "@angular/compiler": "~10.0.0",
    "@angular/compiler-cli": "~10.0.0",
    "@angular/language-service": "~10.0.0",
    "@ionic/angular-toolkit": "^2.3.0",
    "@ionic/lab": "3.2.7",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.5.5",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "com-sarriaroman-photoviewer": "^1.2.5",
    "com.telerik.plugins.nativepagetransitions": "^0.7.0",
    "cordova-browser": "^6.0.0",
    "cordova-plugin-camera": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-filepath": "^1.5.8",
    "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",
    "cordova-plugin-whitelist": "^1.3.3",
    "es.keensoft.fullscreenimage": "^0.2.10",
    "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": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-file": {},
      "cordova-plugin-filepath": {},
      "com-sarriaroman-photoviewer": {},
      "es.keensoft.fullscreenimage": {},
      "com.telerik.plugins.nativepagetransitions": {}
    },
    "platforms": [
      "android",
      "browser"
    ]
  }
}
2 Likes
2

for some versions you use ^, and for others you use ~.
^ will pick latest minor version, i.e. 10.2.5, but ~ will pick latest patch versions, i.e 10.0.5.
Some of the angular versions using latest minor version expect that other of the dependencies you also installed to have a similar minor version than they have, but since you installed them with ~ it’s a different minor version and they fail to install.

Try switching all the dependencies to use ^

3

Didn’t solve the problem

4

The problem should be different now, try deleting node_modules and package-lock.json too.

5

I resolved the issue by installing Node version 14.15.1 and reinstalling Ionic and Cordova. Thanks.

6

Thanks! It works! The issue has resolved!

7

That’s not a good solution, is working because node 14 uses npm 6 which doesn’t care about peer dependencies, but having incorrect peer dependences can cause other issues.
Also node 14 is deprecated and out of support and latest cordova cli doesn’t support it.

8

Ensure that the NodeJS version you’re using is compatible with the project’s dependencies. Sometimes, certain packages may require specific NodeJS versions to function correctly.