"Unable to resolve dependency tree" error during NPM install of APM-Start about angular-gettingstarted

[DeborahK]

Did you see any errors after running npm install?

Did you run npm audit fix? Running the fix will cause a mismatch with your versions, so it should not be run.

Try this:

1. Delete node_module folder and the package-lock.json file.
2. Run npm cache verify to verify and clean up your npm.
3. Run npm install again. (Do NOT run npm audit fix)
4. Run npm start

Let me know if that resolves the issue.

[DeborahK]

I haven't seen that error before.

Had you done anything else? Or installed anything else into that folder?

What version of node and npm do you have?

Reading this: https://stackoverflow.com/questions/64573177/unable-to-resolve-dependency-tree-error-when-installing-npm-packages

Suggests trying:

• npm install --force
• npm install --legacy-peer-deps

But I don't know why you would suddenly see this. The dependencies in the package.json file should all be compatible unless something else was installed to modify it.

EDIT:
If you want to continue with the course without having to install anything, try using stackblitz as per the instructions here: https://github.com/DeborahK/Angular-GettingStarted#stackblitz

[alundiak]

Just in case, I did have similar behavior, when I tried either npm upgrade my current Angular 11.x based boilerplate from previous ng new or create new ng new abc based on Angular 12.x. I simply forgot to upgrade Angular CLI. So this npm install -g @angular/cli@latest solved my errors during ng new abc.

[jedibob5]

The error I posted is the error that occurs when I attempt to run npm install. It doesn't appear that a package-lock or node_modules folder even got generated in the project folder. I have not run npm audit fix at any point.

I decided to run npm cache verify anyway to see what happened, this was the output.

robert.anderson@ATGs-MBP APM-Start % npm cache verify
Cache verified and compressed (~/.npm/_cacache)
Content verified: 1525 (84613636 bytes)
Content garbage-collected: 1 (987145 bytes)
Index entries: 1525
Finished in 4.157s

npm install still fails with the same error after running this.

[Spring3]

Got this error in my personal repo

It looks like it happened to me due to the new version of lock file which was not supported by a lower version of npm.

I also got the following message:

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!

deleting the node_modules and re-generating lock file helped in my case.

[flutterq]

[Solved] Unable to resolve dependency tree error for creating new angular project

[cabbad]

我的是node版本太高了，重新安装对应版本就行

[jedibob5]

I talked to a coworker who was also taking the course and was encountering the same issue. He had figured out that updating the Angular dependencies to the latest 10.x release (~10.2.4 for most @angular dependencies, @angular/cli on ~10.2.1) resolved the problem, and npm install now runs successfully.

I could make a PR with the package.json updates, though if it's not reproducible on machines other than the two of ours it's probably worth investigating more before applying a fix. Versions of potentially relevant things below:

OS: Mac OSX Big Sur 11.1
node -v: v15.5.1
npm -v: 7.3.0
nvm -v: 0.37.2

Let me know if there's any other information I could provide that might help.

[DeborahK]

Thank you for the additional information. I'll spend some more time on it today, trying it on several machines, and I'll update the code as needed.

[himanshigupta29]

it is because of a compatibility issue between npm and ng

[bvedant]

What version of the Angular CLI are you using? When you updated the Angular CLI version, did you update the version of the Angular libraries in the project as well? (The locally installed version of the Angular CLI should match with its associated version of the Angular libraries in the project.)

What happens if you delete your package-lock.json file and your node-modules folder and you re-run npm install again?

Hi Deborah, actually I was able to fix the issue and I landed on this page from someone else's tutorial that was giving me the same error as HJosh had, but what I did to fix my environemnt was copy package.json dependency sections with up-to-date values, deleting node_modules/ and pakcage-lock.json, and running npm install with the --legacy-peer-deps flag.

[DeborahK]

@amit-jadhav This github repo contains the code for my Angular: Getting Started course. It doesn't look like the code you are compiling is from this course.

If you have a more general Angular question, please post to stackoverflow.com.

That said, reading your error message, it sounds like your Angular project is v8, but your ag-grid is looking for Angular v9. It's important to ensure you have appropriate versions of third party components that match the version of Angular you have. (Angular is now on v13)

Hope you can resolve your issue.

[vinay-kumar-uppala]

I haven't seen that error before.

Had you done anything else? Or installed anything else into that folder?

What version of node and npm do you have?

Reading this: https://stackoverflow.com/questions/64573177/unable-to-resolve-dependency-tree-error-when-installing-npm-packages

Suggests trying:

• npm install --force
• npm install --legacy-peer-deps

But I don't know why you would suddenly see this. The dependencies in the package.json file should all be compatible unless something else was installed to modify it.

EDIT: If you want to continue with the course without having to install anything, try using stack blitz as per the instructions here: https://github.com/DeborahK/Angular-GettingStarted#stackblitz

I have tried this one, and it's working fine without any errors.
Thanks!!

[mnaeem76]

@DeborahK I'm having similar problem. I have the following Specs:

OS: Windows 10
node -v: v15.5.1
npm: 7.3.0

I also ran npm cache verify

Cache verified and compressed (~\AppData\Local\npm-cache\_cacache)
Content verified: 3469 (151630332 bytes)
Content garbage-collected: 25 (28857697 bytes)
Index entries: 3469
Finished in 28.403s

When I ran npm install on the source code downloaded from GitHub (which targets angular 10) I got these errors

# npm resolution error report

2021-01-12T11:13:11.681Z

While resolving: [email protected]
Found: @angular/[email protected]
node_modules/@angular/compiler
  @angular/compiler@"~10.0.4" from the root project

Could not resolve dependency:
peer @angular/compiler@"10.2.4" from @angular/[email protected]
node_modules/@angular/compiler-cli
  peer @angular/compiler-cli@">=10.0.0-next.0 < 11" from @angular-devkit/[email protected]
  node_modules/@angular-devkit/build-angular

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "@angular/compiler",
    "version": "10.0.14",
    "whileInstalling": {
      "name": "apm",
      "version": "0.0.0",
      "path": "D:\\Learning\\Angular\\Pluralsight\\Getting Started\\10\\APM"
    },
    "location": "node_modules/@angular/compiler",
    "dependents": [
      {
        "type": "prod",
        "name": "@angular/compiler",
        "spec": "~10.0.4",
        "from": {
          "location": "D:\\Learning\\Angular\\Pluralsight\\Getting Started\\10\\APM"
        }
      }
    ]
  },
  "edge": {
    "type": "peer",
    "name": "@angular/compiler",
    "spec": "10.2.4",
    "error": "INVALID",
    "from": {
      "name": "@angular/compiler-cli",
      "version": "10.2.4",
      "whileInstalling": {
        "name": "apm",
        "version": "0.0.0",
        "path": "D:\\Learning\\Angular\\Pluralsight\\Getting Started\\10\\APM"
      },
      "location": "node_modules/@angular/compiler-cli",
      "dependents": [
        {
          "type": "peer",
          "name": "@angular/compiler-cli",
          "spec": ">=10.0.0-next.0 < 11",
          "from": {
            "name": "@angular-devkit/build-angular",
            "version": "0.1000.8",
            "whileInstalling": {
              "name": "apm",
              "version": "0.0.0",
              "path": "D:\\Learning\\Angular\\Pluralsight\\Getting Started\\10\\APM"
            },
            "location": "node_modules/@angular-devkit/build-angular",
            "dependents": []
          }
        }
      ]
    }
  },
  "peerConflict": null,
  "strictPeerDeps": false,
  "force": false
}

The exercise files from Pluralsight (which target angualr 9) seem to compile just fine. I simply copied the contentsof the packages.json file from exercise folder on to packages.json file from GitHub, and I was able to compile without issues.

Not sure what is happening since I'm a newbie to all this. If you can help me figure out what I should do, that will be great. Perhaps I can continue the course with angular 9 from the exercise files? Or you think I should pursue the angular 10 track if that's going to affect the learning process.

I'm attaching here a zip file with 2 packages.json files for your reference; one taken originally from GitHub APM-start and other from Exercises on Pluralsight
Packages files.zip

Thanks,
Mudasser

[mnaeem76]

@DeborahK Just wanted to update you that I was able to compile successfully with GitHub APM-Start version (that uses angular 10). I realized I had installed latest version of node.js instead of the LTS. I uninstalled node.js and installed again, this time using LTS.

My current versions are:

node:  v14.15.4
npm: 6.14.10

Since I'm a newbie, I think I'll just focus on learning via the course outline and lectures rather than diving into unchartered territory!

Thanks
Mudasser

[DeborahK]

Hi @mnaeem76 Sounds like you were able to move forward. Let me know if you have any further questions.

And thank you for letting me know that the exercise files were not updated to Angular v10.

[bkiprono]

I'm undergoing the same.
Did you guys get a fix?

[DeborahK]

The first thing to check is to ensure you are using the "LTS" version of node, NOT the "current" version of node.

Then try this:

1. Delete node_module folder and the package-lock.json file.
2. Run npm cache verify to verify and clean up your npm.
3. Run npm install again. (Do NOT run npm audit fix)
4. Run npm start

Let me know if that resolves your issue.

[davinma]

Sometimes you should be downgrade your npm version, run nvm list and nvm use <version string here> first, then run npm install, and that worked for me.

[HjoshM]

After upgrading to the latest Angular cli, when I run ng serve, I get the following error:

./node_modules/@angular-devkit/build-angular/src/webpack/es5-polyfills.js:106:0-37 - Error: Module not found: Error: Can't resolve 'zone.js/plugins/zone-legacy' in 'C:\Users\Joshua\App\node_modules@angular-devkit\build-angular\src\webpack'

I have tried every solution and suggestion in the posts that exist about zone.js related issues and errors, including the solutions mentioned on this page, but nothing has resolved it...

Does anyone know how to fix this in the latest Angular version?

[bvedant]

After upgrading to the latest Angular cli, when I run ng serve, I get the following error:

./node_modules/@angular-devkit/build-angular/src/webpack/es5-polyfills.js:106:0-37 - Error: Module not found: Error: Can't resolve 'zone.js/plugins/zone-legacy' in 'C:\Users\Joshua\App\node_modules@angular-devkit\build-angular\src\webpack'

I have tried every solution and suggestion in the posts that exist about zone.js related issues and errors, including the solutions mentioned on this page, but nothing has resolved it...

Does anyone know how to fix this in the latest Angular version?

Running into the exact same issue as you.

[DeborahK]

What version of the Angular CLI are you using? When you updated the Angular CLI version, did you update the version of the Angular libraries in the project as well? (The locally installed version of the Angular CLI should match with its associated version of the Angular libraries in the project.)

What happens if you delete your package-lock.json file and your node-modules folder and you re-run npm install again?

[amit-jadhav]

I tried all the solutions provided on this page. None of them worked for me. I am using npm version 8.1.0.

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@"~8.2.8" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^9.0.0" from [email protected]
npm ERR! node_modules/ag-grid-angular
npm ERR! ag-grid-angular@"^23.2.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 C:\Users\xxx\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Local\npm-cache_logs\2021-11-26T12_22_55_659Z-debug.log`

When I tried to use --force, or --legacy-peer-deps option the command executes forever (command doesn't return any result).

Please provide some solution to this issue.

I want to see you.
[email protected]

[vinishgeorge]

node version : lts/gallium -> v16.14.0
ng new auth0-poc
Fails while creating the project with error
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE auth0-poc/README.md (1025 bytes)
CREATE auth0-poc/.editorconfig (246 bytes)
CREATE auth0-poc/.gitignore (631 bytes)
CREATE auth0-poc/angular.json (3679 bytes)
CREATE auth0-poc/package.json (1286 bytes)
CREATE auth0-poc/tsconfig.json (489 bytes)
CREATE auth0-poc/tslint.json (1953 bytes)
CREATE auth0-poc/browserslist (429 bytes)
CREATE auth0-poc/karma.conf.js (1021 bytes)
CREATE auth0-poc/tsconfig.app.json (210 bytes)
CREATE auth0-poc/tsconfig.spec.json (270 bytes)
CREATE auth0-poc/src/favicon.ico (948 bytes)
CREATE auth0-poc/src/index.html (294 bytes)
CREATE auth0-poc/src/main.ts (372 bytes)
CREATE auth0-poc/src/polyfills.ts (2835 bytes)
CREATE auth0-poc/src/styles.scss (80 bytes)
CREATE auth0-poc/src/test.ts (753 bytes)
CREATE auth0-poc/src/assets/.gitkeep (0 bytes)
CREATE auth0-poc/src/environments/environment.prod.ts (51 bytes)
CREATE auth0-poc/src/environments/environment.ts (662 bytes)
CREATE auth0-poc/src/app/app-routing.module.ts (246 bytes)
CREATE auth0-poc/src/app/app.module.ts (393 bytes)
CREATE auth0-poc/src/app/app.component.scss (0 bytes)
CREATE auth0-poc/src/app/app.component.html (25755 bytes)
CREATE auth0-poc/src/app/app.component.spec.ts (1068 bytes)
CREATE auth0-poc/src/app/app.component.ts (214 bytes)
CREATE auth0-poc/e2e/protractor.conf.js (808 bytes)
CREATE auth0-poc/e2e/tsconfig.json (214 bytes)
CREATE auth0-poc/e2e/src/app.e2e-spec.ts (642 bytes)
CREATE auth0-poc/e2e/src/app.po.ts (301 bytes)
⠏ Installing packages...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/jasmine-core
npm ERR! dev jasmine-core@"~3.5.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.8" from [email protected]
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR! dev karma-jasmine-html-reporter@"^1.4.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.
npm ERR!
npm ERR! See /home/vg/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/vg/.npm/_logs/2022-02-18T05_46_05_464Z-debug-0.log
✖ Package install failed, see above.

node version : lts/fermium -> v14.19.0
ng new auth0-poc

Works fine without error.

[DeborahK]

This issue seems better posted to the Angular/CLI repo so the team responsible for the CLI can help.

[adnanhaddad]

Having the same issue when trying to add bootstrap

npm ERR! code ERESOLVE                             
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"13.2.6" from @angular/[email protected]
npm ERR! node_modules/@angular/localize
npm ERR!   peer @angular/localize@"^13.0.0" from @ng-bootstrap/[email protected]
npm ERR!   node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!     @ng-bootstrap/ng-bootstrap@"12.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!
npm ERR! See C:\Users\Adnan\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Adnan\AppData\Local\npm-cache\_logs\2022-03-15T23_45_41_407Z-debug-0.log
× Package install failed, see above.

Angular CLI: 13.0.4
Node: 16.14.0
Package Manager: npm 8.3.1
OS: win32 x64

[DeborahK]

The course uses bootstrap, not ng-bootstrap. Which were you trying to install?

[panksahu]

Hello,
I am facing looks like similar issue. Tried whole night by manually adding in package.json for peerDependencies, but didn't got any clue for the correct fix...on local i ma able to run it by execute command.

1-Delete node_module folder and the package-lock.json file.
2-Run npm cache verify to verify and clean up your npm.
3-npm install --legacy-peer-deps

stack: Error: Command failed: npm install
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: [email protected]
npm ERR! Found: @microsoft/[email protected]
npm ERR! node_modules/@microsoft/teams-js
npm ERR! @microsoft/teams-js@"^2.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @microsoft/teams-js@"^1.8.0" from [email protected]
npm ERR! node_modules/msteams-react-base-component
npm ERR! msteams-react-base-component@"^3.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @microsoft/[email protected]
npm ERR! node_modules/@microsoft/teams-js
npm ERR! peer @microsoft/teams-js@"^1.8.0" from [email protected]
npm ERR! node_modules/msteams-react-base-component
npm ERR! msteams-react-base-component@"^3.1.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.

My package json is:

[panksahu]

This is not working and throwing above error while direct deploying on azure from VS code.

[RaminMoghtader]

@DeborahK Dear Ms. Kurata. Thank you for all the great information and the courses. I appreciate your style of teaching and your courses very much.

Looks like I also ran into the same issue as the rest of the comments here, which apparantly have to do with Node Versions and Ng version. Based on information provided from @mnaeem76 ( thanks)
node: v14.15.4
npm: 6.14.10
I've used now NVM to install the required version and am running Dem-Start.

My Question: What are the enhanced and added changes we need to learn to augment the Reactive Forms course that you have provided? Thanks again for a great course and information

RM