CODEWITHSUNDEEP
javascriptangularnpm
Ayoub k
Ayoub k

Reputation: 8868

Error while running npm install on angular project

Here's the package.json file:

{
  "dependencies": {
    "@angular/animations": "^9.1.3",
    "@angular/cdk": "^11.1.1",
    "@angular/common": "^9.1.3",
    "@angular/compiler": "^9.1.3",
    "@angular/core": "^9.1.3",
    "@angular/forms": "^9.1.3",
    "@angular/http": "^7.2.15",
    "@angular/localize": "^9.1.3",
    "@angular/platform-browser": "^9.1.3",
    "@angular/platform-browser-dynamic": "^9.1.3",
    "@angular/platform-server": "^9.1.3",
    "@angular/router": "^9.1.3",
    "@angular/service-worker": "^9.1.3",
    "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
    "@kolkov/angular-editor": "^1.1.5",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
    "@ng-select/ng-select": "^4.0.0",
    "@ngrx/store": "^9.1.0",
    "@ngx-rocket/scripts": "4.0.0",
    "@ngx-translate/core": "^12.1.2",
    "@pioneer-code/pioneer-tree": "^2.1.0",
    "@types/async": "^3.0.3",
    "@types/d3": "^5.7.2",
    "angular-fusioncharts": "3.0.4",
    "angular-tree-component": "8.5.6",
    "async": "^3.1.0",
    "bootstrap": "^4.4.1",
    "core-js": "^3.5.0",
    "d3": "^5.16.0",
    "david": "^12.0.0",
    "deep-object-diff": "^1.1.0",
    "fusioncharts": "3.15.3",
    "fusionmaps": "^3.15.3",
    "html2canvas": "^1.0.0-rc.5",
    "lodash": "^4.17.15",
    "ng-drag-drop": "^5.0.0",
    "ng2-dragula": "^2.1.1",
    "ngx-bar-rating": "^1.1.0",
    "ngx-bootstrap": "^5.2.0",
    "ngx-chips": "^2.1.0",
    "ngx-color-picker": "^9.1.0",
    "ngx-doc-viewer": "^1.1.0",
    "ngx-drag-drop": "^2.0.0",
    "ngx-export-as": "^1.4.2",
    "ngx-freshchat": "^0.2.0",
    "ngx-infinite-scroll": "^8.0.1",
    "ngx-joyride": "^2.2.11",
    "ngx-quill": "^12.0.1",
    "ngx-take-until-destroy": "^5.4.0",
    "ngx-toastr": "^12.0.1",
    "ngx-toggle-switch": "^2.0.5",
    "ngx-zone-scheduler": "^2.2.1",
    "node-sass": "^4.14.0",
    "quill": "^1.3.7",
    "rxjs": "^6.5.5",
    "socket.io-client": "^3.0.4",
    "tslib": "^1.10.0",
    "underscore": "^1.10.2",
    "uuid": "^7.0.3",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.3",
    "@angular/cli": "^9.1.6",
    "@angular/compiler-cli": "^9.1.7",
    "@angular/language-service": "^9.1.3",
    "@biesbjerg/ngx-translate-extract": "^6.0.4",
    "@ngrx/store-devtools": "^9.1.0",
    "@ngx-rocket/scripts": "^4.0.0",
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "^3.5.10",
    "@types/jasminewd2": "^2.0.8",
    "@types/lodash": "4.14.157",
    "@types/node": "^13.13.4",
    "@types/underscore": "^1.9.4",
    "@types/uuid": "^7.0.3",
    "chalk": "^4.0.0",
    "codelyzer": "^5.1.2",
    "copyfiles": "^2.1.1",
    "cpy": "^8.0.0",
    "file-saver": "^2.0.2",
    "hads": "^2.0.1",
    "htmlhint": "^0.11.0",
    "https-proxy-agent": "^5.0.0",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "^5.0.2",
    "karma": "^5.0.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "^3.1.1",
    "karma-jasmine-html-reporter": "^1.5.3",
    "karma-junit-reporter": "^2.0.1",
    "ng-packagr": "^9.0.0",
    "protractor": "^5.4.3",
    "puppeteer": "^3.0.1",
    "rxjs-tslint": "^0.1.7",
    "stylelint": "^13.3.3",
    "stylelint-config-recommended-scss": "^4.2.0",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-scss": "^3.17.1",
    "ts-node": "^8.9.1",
    "tslint": "^6.1.1",
    "typescript": "~3.8.3",
    "webpack": "^4.43.0"
  },
  "peerDependencies": {
    "mobx": "5.15.1",
    "mobx-angular": "3.0.3"
  }
}

When running npm install i got the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^9.1.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^11.0.0 || ^12.0.0-0" from @angular/[email protected]
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"^11.1.1" 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! 
npm ERR! See /Users/ayoubkhial/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ayoubkhial/.npm/_logs/2021-07-12T23_35_44_624Z-debug.log

And when running the following command npm install --force i got this error:
enter image description here

Upvotes: 1

Views: 16547

Answers (2)

Analyst
Analyst

Reputation: 911

I fixed it by deleting node_modules, package-lock.json directly from project directory. Clean cache by running command npm cache clean --force. Now try npm i.

Upvotes: 3

David Kidwell
David Kidwell

Reputation: 720

You have "@angular/cdk": "^11.1.1" looking for @angular/common@"^11.0.0 || ^12.0.0-0" but your package.json has "@angular/common": "^9.1.3"

From the error message here,

npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^11.0.0 || ^12.0.0-0" from @angular/[email protected]
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"^11.1.1" from the root project

I recommend syncing up your angular packages so that they are on the same version. This could mean either upgrading all the @angular packages to v11 or downgrading the cdk to v9.

In some cases you can use --force or --legacy-peer-deps to tell the installation to either ignore certain peer dependencies or use legacy dependencies but since your mismatch is between core angular packages I wouldn't recommend that approach here.

Upvotes: 3

Related Questions