Cannot resolve Angular dependency issues

Question

Whenever I run npm install or any other npm command it always throws this bunch of dependency errors and I am really confused how to solve them.

Things that I tried:-->

Force update angular CLI.
Reinstalled Node.

I even deleted this whole project once and cloned it again from the repo.

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @angular/animations@12.1.1
npm ERR! Found: @angular/core@11.2.0
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"~11.2.0" from the root project
npm ERR!   peer @angular/core@"11.2.0" from @angular/common@11.2.0     
npm ERR!   node_modules/@angular/common
npm ERR!     @angular/common@"~11.2.0" from the root project
npm ERR!     peer @angular/common@"11.2.0" from @angular/forms@11.2.0  
npm ERR!     node_modules/@angular/forms
npm ERR!       @angular/forms@"~11.2.0" from the root project
npm ERR!       1 more (@ionic/angular)
npm ERR!     5 more (@angular/platform-browser, ...)
npm ERR!   7 more (@angular/forms, @angular/platform-browser, ...)     
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"12.1.1" from @angular/animations@12.1.1   
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"^12.1.1" from the root project
npm ERR!   peer @angular/animations@">=12.0.0-0" from ngx-trend@7.0.0  
npm ERR!   node_modules/ngx-trend
npm ERR!     ngx-trend@"^7.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/core@12.1.1
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.1.1" from @angular/animations@12.1.1 
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"^12.1.1" from the root project       
npm ERR!     peer @angular/animations@">=12.0.0-0" from ngx-trend@7.0.0
npm ERR!     node_modules/ngx-trend
npm ERR!       ngx-trend@"^7.0.0" 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!```

Here's how my package.json looks like:

{
  "name": "APP NAME",
  "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"
  },
  "config": {
    "ionic_generate_source_map": "true"
  },
  "private": true,
  "dependencies": {
    "-": "0.0.1",
    "@angular/animations": "^12.1.1",
    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@awesome-cordova-plugins/analytics-firebase": "^5.43.0",
    "@awesome-cordova-plugins/core": "^5.43.0",
    "@awesome-cordova-plugins/firebase-crashlytics": "^5.37.3",
    "@ionic-native/app-version": "^5.36.0",
    "@ionic-native/barcode-scanner": "^5.32.0",
    "@ionic-native/camera": "^5.34.0",
    "@ionic-native/core": "^5.33.1",
    "@ionic-native/device": "^5.34.0",
    "@ionic-native/fcm": "^5.36.0",
    "@ionic-native/image-picker": "^5.34.0",
    "@ionic-native/in-app-browser": "^5.34.0",
    "@ionic-native/ionic-webview": "^5.33.0",
    "@ionic-native/market": "^5.36.0",
    "@ionic-native/network": "^5.34.0",
    "@ionic-native/network-interface": "^5.34.0",
    "@ionic-native/pdf-generator": "^5.36.0",
    "@ionic-native/speech-recognition": "^5.31.1",
    "@ionic-native/status-bar": "^5.33.1",
    "@ionic/angular": "^5.5.2",
    "@types/hammerjs": "^2.0.39",
    "bootstrap": "^4.6.0",
    "chart.js": "^2.9.3",
    "chartjs-plugin-annotation": "^1.0.2",
    "compare-func": "^2.0.0",
    "cordova-browser": "6.0.0",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-firebase-crashlytics": "1.0.0",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-networkinterface": "^2.0.0",
    "cordova-plugin-speechrecognition": "^1.2.0",
    "cordova-res": "^0.15.4",
    "hammerjs": "^2.0.8",
    "ion-bottom-sheet": "^2.0.6",
    "jquery": "^3.6.0",
    "ng-circle-progress": "^1.6.0",
    "ng-http-loader": "^9.1.0",
    "ng2-charts": "^2.2.3",
    "ngx-trend": "^7.0.0",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "properties-parser": "^0.3.1",
    "rxjs": "~6.6.0",
    "sentry-cordova": "^1.0.0",
    "strip-final-newline": "^3.0.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.4",
    "@angular/cli": "11.1.4",
    "@angular/compiler": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@ionic/angular-toolkit": "^3.1.0",
    "@ionic/lab": "3.2.10",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "com.razorpay.cordova": "^1.4.15",
    "cordova-android": "^10.1.2",
    "cordova-annotated-plugin-android": "^1.0.4",
    "cordova-ios": "^6.2.0",
    "cordova-pdf-generator": "^2.1.1",
    "cordova-play-services-version-adapter": "^1.1.0",
    "cordova-plugin-analytics": "^2.0.0",
    "cordova-plugin-androidx": "^3.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-cocoapod-support": "^1.6.2",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.8.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-market": "^1.2.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-telerik-imagepicker": "^2.3.3",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "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.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-speechrecognition": {},
      "phonegap-plugin-barcodescanner": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-networkinterface": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-androidx": {},
      "cordova-plugin-telerik-imagepicker": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-file": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-market": {},
      "sentry-cordova": {},
      "com.razorpay.cordova": {},
      "cordova-plugin-analytics": {},
      "cordova-plugin-firebase-crashlytics": {
        "ANDROID_FIREBASE_ANALYTICS_VERSION": "17.2.1"
      },
      "cordova-pdf-generator": {}
    },
    "platforms": [
      "browser",
      "android",
      "ios"
    ]
  }
}

Have you tried changing the "@angular/animations" version to "~11.2.0"? — Jared A Sutton, Aug 30 '22 at 16:53
I can't paste in complete error due to the word limit but something like this. npm ERR! While resolving: @angular/animations@11.2.14 — Kunal Bamborde, Aug 30 '22 at 17:24
That actually reduced the error size. Now it's mostly around this:--> npm ERR! Could not resolve dependency: npm ERR! peer @angular/core@"11.0.0" from @angular/animations@11.0.0 — Kunal Bamborde, Aug 30 '22 at 17:33
Try change the version number of "@angular/animations" manually from "^12.1.1" to "~11.2.0" and then command `npm install` — paranaaan, Aug 31 '22 at 04:14
@paranaaan "@angular/animations" is set to "~11.2.0" only but running `npm install` gives me `npm ERR! Could not resolve dependency: npm ERR! peer chart.js@"^2.9.3" from ng2-charts@2.4.3 npm ERR! node_modules/ng2-charts npm ERR! ng2-charts@"^2.2.3" from the root project` — Kunal Bamborde, Aug 31 '22 at 06:36

Naveen Kumar · Answer 1 · 2022-09-20T12:13:09.447

0

please check your node version.

change your node version 10 or 12 again and install the npm this method resolves my issue :)

The below post will help to resolve your issue.

Is there a compatibility list for Angular / Angular-CLI and Node.js?

edited Sep 20 '22 at 12:13

answered Sep 20 '22 at 12:12

Naveen Kumar

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 24 '22 at 01:57

Cannot resolve Angular dependency issues

1 Answers1