"Unable to resolve dependency tree" while creating a new Angular project

Question

I am new to coding, and I want to start using Angular on my M1 MacBook.

The installation of Angular cli was only somewhat successful, as I got this warning after typing sudo npm install -g @angular/cli:

npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs

...But angular must be installed, since I get this message after typing ng v:

❯ ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 15.1.5
Node: 18.14.0
Package Manager: npm 9.3.1
OS: darwin arm64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1501.5 (cli-only)
@angular-devkit/core         15.1.5 (cli-only)
@angular-devkit/schematics   15.1.5 (cli-only)
@schematics/angular          15.1.5 (cli-only)

But when I type ng new Hello-World into terminal to create a new project, I get this error message:

⠴ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: rxjs@undefined
npm ERR! node_modules/rxjs
npm ERR!   rxjs@"~7.8.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"^6.5.3 || ^7.4.0" from @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^15.1.0" from the root project
npm ERR!   peer @angular/core@"15.1.4" from @angular/[email protected]
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"^15.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.
npm ERR! For a full report see:
npm ERR! /Users/cez/.npm/_logs/2023-02-15T12_35_49_149Z-eresolve-report.txt

As I understand it, the problem is that my rxjs version is ~7.8.0 (which can be confirmed by looking in the package.json file), and 7.8.0 is not between ^6.5.3 || ^7.4.0, and therefore too new. But how do I solve this?

Here are some potentially relevant versions of what I have installed.

❯ node --version
v18.14.0

❯ npm --version
9.3.1

I hope someone can help me fix the issue.

I have tried running ng new Hello-World --force as the error message suggests. I got this message:

⠧ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: rxjs@undefined
npm ERR! node_modules/rxjs
npm ERR!   rxjs@"~7.8.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"^6.5.3 || ^7.4.0" from @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^15.1.0" from the root project
npm ERR!   peer @angular/core@"15.1.4" from @angular/[email protected]
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"^15.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.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/cez/.npm/_logs/2023-02-15T12_55_47_782Z-eresolve-report.txt

I also tried running ng new Hello-World --legacy-peer-deps without any results It gave me this message:

Error: Unknown argument: legacy-peer-deps

Answer 1

I deleted my npm cache and worked. run this command:

sudo npm cache clean --force 

then create new angular app using ng new my-app