1

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

2
  • Delete your node modules folder and re install it looks like it’s an issue with the version of npm used to install the package at different times. Commented Jul 13, 2021 at 0:03
  • For example in my projects I use nvm for version management one project may be on node 14 and the other on node 12 in this case I need to change my node version before running/installing the project Commented Jul 13, 2021 at 0:04

2 Answers 2

3

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.

Sign up to request clarification or add additional context in comments.

Comments

3

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.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.