`npm install` fails with NPM 7

[maxschwarzmueller]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

This bug did not occur a couple of days ago. It doesn't seem like it's caused by a specific CLI version. It might be caused by some (peer) dependency of a brand-new Angular project which changed its dependencies.

Description

Creating a new Angular project with the Angular CLI (ng new) fails when using the latest version of npm (7.5.x).

Error message see below.

🔬 Minimal Reproduction

1. Install latest version of Angular CLI: npm install -g @angular/cli@latest
2. Install latest version of npm: npm install -g npm@latest
3. Create a new Angular project: ng new some-app

Step 3 crashes with the below error message.

🔥 Exception or Error

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: ng-npm@0.0.0
npm ERR! Found: @angular/compiler-cli@11.2.0-next.0
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"~11.2.0-next.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler-cli@"^11.0.0 || ^11.1.0-next" from @angular-devkit/build-angular@0.1102.0-next.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~0.1102.0-next.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 /Users/maximilianschwarzmuller/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/maximilianschwarzmuller/.npm/_logs/2021-02-03T21_29_25_647Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

🌍 Your Environment

Angular CLI: 11.1.2
Node: 15.4.0
OS: darwin x64

Angular: undefined
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1101.2
@angular-devkit/core         11.1.2
@angular-devkit/schematics   11.1.2
@angular/cli                 11.1.2
@schematics/angular          11.1.2
@schematics/update           0.1101.2

[sebastian-zarzycki-apzumi]

I've encountered similar issues (NPM 7.5.2), but when creating new project (ng new ng-app), I get:

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: ng-app@0.0.0
npm ERR! Found: typescript@4.1.3
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"~4.1.2" from the root project
npm ERR!   peer typescript@"~4.0.0 || ~4.1.0" from @angular-devkit/build-angular@0.1101.2
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~0.1101.2" from the root project
npm ERR!   2 more (@angular/compiler-cli, ng-packagr)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@"~3.9.5" from tsickle@0.39.1
npm ERR! node_modules/tsickle
npm ERR!   peerOptional tsickle@"~0.39.0" from ng-packagr@11.1.3
npm ERR!   node_modules/ng-packagr
npm ERR!     peerOptional ng-packagr@"^11.0.0 || ^11.1.0-next" from @angular-devkit/build-angular@0.1101.2
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~0.1101.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.

And when trying to npm install in my current project

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: project@1.6.4
npm ERR! Found: @angular/compiler@11.0.9
npm ERR! node_modules/@angular/compiler
npm ERR!   @angular/compiler@"~11.0.9" from the root project
npm ERR!   peer @angular/compiler@"11.0.9" from @angular/compiler-cli@11.0.9
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     dev @angular/compiler-cli@"~11.0.9" from the root project
npm ERR!     peer @angular/compiler-cli@"^11.0.0" from @angular-devkit/build-angular@0.1100.7
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"0.1100.7" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.1.2" from @angular/localize@11.1.2
npm ERR! node_modules/@angular/localize
npm ERR!   peerOptional @angular/localize@"^11.0.0" from @angular-devkit/build-angular@0.1100.7
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"0.1100.7" 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.

Both these were working just fine with NPM 6.x. But just looking at these errors, peer dependencies seem to mismanaged.

Environment:

Angular CLI: 11.1.2
Node: 14.15.1
OS: darwin x64

Angular: <error>
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.2 (cli-only)
@angular-devkit/build-angular   <error>
@angular-devkit/core            11.1.2 (cli-only)
@angular-devkit/schematics      11.1.2 (cli-only)
@angular/cli                    11.1.2 (cli-only)
@schematics/angular             11.1.2 (cli-only)
@schematics/update              0.1101.2 (cli-only)
rxjs                            6.6.3 (cli-only)
typescript                      <error>

[SaadiSave]

I've encountered the same error

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: pwa@0.0.0
npm ERR! Found: typescript@4.1.3
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"~4.1.2" from the root project
npm ERR!   peer typescript@"~4.0.0 || ~4.1.0" from @angular-devkit/build-angular@0.1101.2
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~0.1101.2" from the root project
npm ERR!   2 more (@angular/compiler-cli, ng-packagr)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@"~3.9.5" from tsickle@0.39.1
npm ERR! node_modules/tsickle
npm ERR!   peerOptional tsickle@"~0.39.0" from ng-packagr@11.1.3
npm ERR!   node_modules/ng-packagr
npm ERR!     peerOptional ng-packagr@"^11.0.0 || ^11.1.0-next" from @angular-devkit/build-angular@0.1101.2
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~0.1101.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.

For more information, the json:

{
  "code": "ERESOLVE",
  "current": {
    "name": "typescript",
    "version": "4.1.3",
    "whileInstalling": {
      "name": "pwa",
      "version": "0.0.0",
      "path": "/home/saadi/Coding/pwa"
    },
    "location": "node_modules/typescript",
    "dependents": [
      {
        "type": "dev",
        "name": "typescript",
        "spec": "~4.1.2",
        "from": {
          "location": "/home/saadi/Coding/pwa"
        }
      },
      {
        "type": "peer",
        "name": "typescript",
        "spec": "~4.0.0 || ~4.1.0",
        "from": {
          "name": "@angular-devkit/build-angular",
          "version": "0.1101.2",
          "whileInstalling": {
            "name": "pwa",
            "version": "0.0.0",
            "path": "/home/saadi/Coding/pwa"
          },
          "location": "node_modules/@angular-devkit/build-angular",
          "dependents": [
            {
              "type": "dev",
              "name": "@angular-devkit/build-angular",
              "spec": "~0.1101.2",
              "from": {
                "location": "/home/saadi/Coding/pwa"
              }
            }
          ]
        }
      },
      {
        "type": "peer",
        "name": "typescript",
        "spec": ">=4.0 <4.2",
        "from": {
          "name": "@angular/compiler-cli",
          "version": "11.1.2",
          "whileInstalling": {
            "name": "pwa",
            "version": "0.0.0",
            "path": "/home/saadi/Coding/pwa"
          },
          "location": "node_modules/@angular/compiler-cli",
          "dependents": [
            {
              "type": "dev",
              "name": "@angular/compiler-cli",
              "spec": "~11.1.1",
              "from": {
                "location": "/home/saadi/Coding/pwa"
              }
            },
            {
              "type": "peer",
              "name": "@angular/compiler-cli",
              "spec": "^11.0.0 || ^11.1.0-next",
              "from": {
                "name": "@angular-devkit/build-angular",
                "version": "0.1101.2",
                "whileInstalling": {
                  "name": "pwa",
                  "version": "0.0.0",
                  "path": "/home/saadi/Coding/pwa"
                },
                "location": "node_modules/@angular-devkit/build-angular",
                "dependents": [
                  {
                    "type": "dev",
                    "name": "@angular-devkit/build-angular",
                    "spec": "~0.1101.2",
                    "from": {
                      "location": "/home/saadi/Coding/pwa"
                    }
                  }
                ]
              }
            },
            {
              "type": "peer",
              "name": "@angular/compiler-cli",
              "spec": "11.1.2",
              "from": {
                "name": "@angular/localize",
                "version": "11.1.2",
                "whileInstalling": {
                  "name": "pwa",
                  "version": "0.0.0",
                  "path": "/home/saadi/Coding/pwa"
                },
                "location": "node_modules/@angular/localize",
                "dependents": [
                  {
                    "type": "peerOptional",
                    "name": "@angular/localize",
                    "spec": "^11.0.0 || ^11.1.0-next",
                    "from": {
                      "name": "@angular-devkit/build-angular",
                      "version": "0.1101.2",
                      "whileInstalling": {
                        "name": "pwa",
                        "version": "0.0.0",
                        "path": "/home/saadi/Coding/pwa"
                      },
                      "location": "node_modules/@angular-devkit/build-angular",
                      "dependents": [
                        {
                          "type": "dev",
                          "name": "@angular-devkit/build-angular",
                          "spec": "~0.1101.2",
                          "from": {
                            "location": "/home/saadi/Coding/pwa"
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            },
            {
              "type": "peer",
              "name": "@angular/compiler-cli",
              "spec": "^11.0.0",
              "from": {
                "name": "ng-packagr",
                "version": "11.1.3",
                "whileInstalling": {
                  "name": "pwa",
                  "version": "0.0.0",
                  "path": "/home/saadi/Coding/pwa"
                },
                "location": "node_modules/ng-packagr",
                "dependents": [
                  {
                    "type": "peerOptional",
                    "name": "ng-packagr",
                    "spec": "^11.0.0 || ^11.1.0-next",
                    "from": {
                      "name": "@angular-devkit/build-angular",
                      "version": "0.1101.2",
                      "whileInstalling": {
                        "name": "pwa",
                        "version": "0.0.0",
                        "path": "/home/saadi/Coding/pwa"
                      },
                      "location": "node_modules/@angular-devkit/build-angular",
                      "dependents": [
                        {
                          "type": "dev",
                          "name": "@angular-devkit/build-angular",
                          "spec": "~0.1101.2",
                          "from": {
                            "location": "/home/saadi/Coding/pwa"
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "type": "peer",
        "name": "typescript",
        "spec": ">=4.0 <4.2",
        "from": {
          "name": "ng-packagr",
          "version": "11.1.3",
          "whileInstalling": {
            "name": "pwa",
            "version": "0.0.0",
            "path": "/home/saadi/Coding/pwa"
          },
          "location": "node_modules/ng-packagr",
          "dependents": [
            {
              "type": "peerOptional",
              "name": "ng-packagr",
              "spec": "^11.0.0 || ^11.1.0-next",
              "from": {
                "name": "@angular-devkit/build-angular",
                "version": "0.1101.2",
                "whileInstalling": {
                  "name": "pwa",
                  "version": "0.0.0",
                  "path": "/home/saadi/Coding/pwa"
                },
                "location": "node_modules/@angular-devkit/build-angular",
                "dependents": [
                  {
                    "type": "dev",
                    "name": "@angular-devkit/build-angular",
                    "spec": "~0.1101.2",
                    "from": {
                      "location": "/home/saadi/Coding/pwa"
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },
  "edge": {
    "type": "peer",
    "name": "typescript",
    "spec": "~3.9.5",
    "error": "INVALID",
    "from": {
      "name": "tsickle",
      "version": "0.39.1",
      "whileInstalling": {
        "name": "pwa",
        "version": "0.0.0",
        "path": "/home/saadi/Coding/pwa"
      },
      "location": "node_modules/tsickle",
      "dependents": [
        {
          "type": "peerOptional",
          "name": "tsickle",
          "spec": "~0.39.0",
          "from": {
            "name": "ng-packagr",
            "version": "11.1.3",
            "whileInstalling": {
              "name": "pwa",
              "version": "0.0.0",
              "path": "/home/saadi/Coding/pwa"
            },
            "location": "node_modules/ng-packagr",
            "dependents": [
              {
                "type": "peerOptional",
                "name": "ng-packagr",
                "spec": "^11.0.0 || ^11.1.0-next",
                "from": {
                  "name": "@angular-devkit/build-angular",
                  "version": "0.1101.2",
                  "whileInstalling": {
                    "name": "pwa",
                    "version": "0.0.0",
                    "path": "/home/saadi/Coding/pwa"
                  },
                  "location": "node_modules/@angular-devkit/build-angular",
                  "dependents": [
                    {
                      "type": "dev",
                      "name": "@angular-devkit/build-angular",
                      "spec": "~0.1101.2",
                      "from": {
                        "location": "/home/saadi/Coding/pwa"
                      }
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  },
  "peerConflict": null,
  "strictPeerDeps": false,
  "force": false
}

[alan-agius4]

Hi all,

The first error:

npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler-cli@"^11.0.0 || ^11.1.0-next" from @angular-devkit/build-angular@0.1102.0-next.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~0.1102.0-next.0" from the root project

Should be solved via #19955

The second error:

npm ERR! Could not resolve dependency:
npm ERR! peer typescript@"~3.9.5" from tsickle@0.39.1
npm ERR! node_modules/tsickle
npm ERR!   peerOptional tsickle@"~0.39.0" from ng-packagr@11.1.3
npm ERR!   node_modules/ng-packagr
npm ERR!     peerOptional ng-packagr@"^11.0.0 || ^11.1.0-next" from @angular-devkit/build-angular@0.1101.2
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~0.1101.2" from the root project

Is an NPM bug, kindly see npm/cli#2615, as a workaround we can try to use the --force option.

[devoto13]

I guess below is yet another NPM bug, but just FYI once a new Angular release is published, it is impossible to ng new/install (e.g. after adding a dependency) a project with any of the older releases. I.e.

$ npm i -g @angular/cli@11.0
$ ng new hello
...
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: hello@0.0.0
npm ERR! Found: @angular/compiler@11.0.9
npm ERR! node_modules/@angular/compiler
npm ERR!   @angular/compiler@"~11.0.9" from the root project
npm ERR!   peer @angular/compiler@"11.0.9" from @angular/compiler-cli@11.0.9
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     dev @angular/compiler-cli@"~11.0.9" from the root project
npm ERR!     peer @angular/compiler-cli@"^11.0.0" from @angular-devkit/build-angular@0.1100.7
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~0.1100.7" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.1.2" from @angular/localize@11.1.2
npm ERR! node_modules/@angular/localize
npm ERR!   peerOptional @angular/localize@"^11.0.0" from @angular-devkit/build-angular@0.1100.7
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~0.1100.7" 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.

[csongi77]

Same error here (On Ubuntu):

Angular CLI: 11.1.2
Node: 10.19.0
OS: linux x64

Angular:
...
Ivy Workspace:

Package Version

@angular-devkit/architect 0.1101.2 (cli-only)
@angular-devkit/core 11.1.2 (cli-only)
@angular-devkit/schematics 11.1.2 (cli-only)
@schematics/angular 11.1.2 (cli-only)
@schematics/update 0.1101.2 (cli-only)

[dgp1130]

We talked about this issue in our CLI triage meeting, unfortunately there's a lot of complexity but we think we have a path forward.

The most immediate "solution" to this problem is to restrict our engines in package.json to disallow NPM 7. This will warn on npm install that NPM 7 is not supported, and will outright fail if the user uses --engine-strict. We will also add a check in the ng CLI to make this an error even for users who don't use --engine-strict. I think we already have one for Node, we'll either need to add one for NPM or confirm that it already has this behavior. This will make ng new, ng update, and ng add fail with clear error on NPM 7. We'll need to publish this change to all supported CLI versions, since they'll all have the same problem. It doesn't really solve the issue, but it will at least give a more actionable error message. I'm also pinning this issue just to raise awareness about it and head off duplicates.

Regarding the tsickle problem, the clear solutions are to:

1. Make a new release of tsickle which supports TS >=4.0. We'll need to coordinate with the relevant people to get this out, but the advantage of this is that it will fix the issue for users in a backward-compatible way, so users don't need to update their versions to leverage the fix. This already has an issue in can you do a release? tsickle#1242.
2. Remove tsickle from ng-packagr. This was only used to support Closure compilation, which isn't supported by the Angular framework anymore anyways, so there's little value in keeping it around. @alan-agius4 already has a PR to remove it. This will fix future versions of ng-packagr, regardless of what happens to tsickle.

Regarding the @angular/localize issue: this is a bit more complicated. Packages from Angular framework are published simultaneously, with pinned versions on each other. In this case, @angular/localize@11.1.2 has a pinned peer dep on specifically @angular/compiler@11.1.2. Generally speaking, peer deps are supposed to be as broad as possible, but since all Angular packages are released at once and managed by the Angular CLI, we expect users to fairly consistently use matching package versions. Historically this has been fine because NPM mostly ignored those peer deps, but now it is trying to validate them and running into conflicts.

While we could unpin FW peer deps to use something like ^11.0.0, that expands a whole swath of possible error states that may arise. Even if we did this going forward, it wouldn't provide an immediate solution unless we changed all currently supported versions the same way. It's also important to point out that @angular/localize@11.1.2 was authored with the expectation that it depends on @angular/compiler@11.1.2, so we have no guarantee that it would work if we gave it @angular/compiler@11.0.9. Since this problem applies to all FW packages, an extensive amount of testing and bug fixing would be necessary to make this work. As a result, we don't think this is a viable option atm.

Alternatively, this is arguably an NPM 7 bug since there is a solution to dependency resolution which it failed to find. It seems that NPM 7 is picking the latest compatible version of @angular/localize@^11.0.0; that happens to be @angular/localize@11.1.2, which has a peer dep on @angular/compiler@11.1.2, which is incompatible with the @angular/compiler@11.0.9 defined by ng new in the user's package.json. However, NPM could just pick @angular/localize@11.0.9, which has a pinned peer dep on @angular/compiler@11.0.9 and satisfies all the requirements. It's not the absolute latest version, but it satisfies all semvers and is probably the right answer. There is an NPM issue about this using different packages but illustrating the same problem. If NPM can address this in their package resolution logic, then we don't need to change anything and it will "just work".

Similarly, @angular/localize (and tsickle) is an optional peer dep which is now being installed by NPM. I'm not sure if this is expected, as the release notes I've found don't seem to mention this case. However, whether it tries to install an optional peer dep or not, it definitely shouldn't fail because that peer dep couldn't be resolved, otherwise it isn't optional. If NPM failed gracefully in these situations, either printing a warning or just carrying on, things would work just fine. There is another NPM issue about this.

For right now, our plan is to do nothing about the @angular/localize issue and hope NPM fixes it for us. If this is expected behavior on the NPM side, then we can reevaluate what we can do on the Angular side to solve the problem.

[JMLucas96]

Thanks for solution @bogacg , it works like a charm!

[SaadiSave]

How long would a fix take, optimistically?

[dgp1130]

Hi @dgp1130 we have been trying to raise awareness that the peer dependencies installation behavior from npm@7 has an opt-out option for projects that are unfortunately running into problems with it.

While I'm not really familiar with angular-cli it seems to me the reported problem is during the bootstrap of a new project, in that case I would recommend shipping a .npmrc file at the project root level setting legacy-peer-deps=true as a quick way to fix the problem.

If that's not really the case, we would really appreciate if the warning message could point users running npm@7 to use the --legacy-peer-deps option instead of recommending users to downgrade to a legacy version.

Thanks!

Thanks for bringing up legacy-peer-deps=true. I should have mentioned that as a possible workaround in my comment, but forgot to do so. This is an easy fix for projects encountering this particular issue who don't want to downgrade to NPM 6.

Unfortunately, we don't think it's practical to ship this flag to user projects. While ng new could be updated to include this flag, the same problem applies to all Angular projects, including existing ones. We do have infrastructure to execute migrations on version update, but most users don't run those migrations when updating patch versions. We could tell users to run such a migration, but that wouldn't make the process any easier than just telling users to add legacy-peer-deps=true themselves.

Even if we did add such a flag, users would expect us to remove it once Angular is compatible, however it's tricky to do so safely, since users may have added the flag for other reasons. Essentially, we can't assume that just because Angular is fixed means that the whole project is fixed. Automatically removing legacy-peer-deps=true, will always be a dangerous migration, with no real way to make it safer.

Long story short, we feel that automatically adding legacy-peer-deps=true to user projects introduces more complexity than it solves. We can much more reliably reject npm@7 up front, and avoid getting into the bad state to begin with. We think this is easier than trying to force projects into and later back out of legacy behavior via this flag.

[e-oz]

Really your only excuse to downgrade npm is because it's easier for you, not for users, so please stop using it as an excuse.

[e-oz]

If you didn't get yet - for some users it's a big problem, for some of us it's just a feeling like we should stuck with the old version of npm (and there is no sight of resolving it) just because of Angular. It is pretty awful feeling and it has nothing common with the feelings like "stability" and "modern framework". It's just some crappy "don't touch it, it stinks" feeling.

[dgp1130]

To summarize some earlier points for those who are just finding this issue: We're committed to getting NPM 7 to work with Angular, but are currently blocked on two NPM bugs (one, two). Once those are addressed, we expect Angular will be compatible.

ng new, ng add, and ng update all explicitly check for NPM 7 and fail with an up-front error message, since they all require an npm install which would not work. We recognize that this makes scaffolding a new Angular project harder than it really needs to be, so we're pushing out a new version which ignores this check for ng new --skip-install. By using this flag the project will be scaffolded, however npm install will not be run. Users can then manually address peer deps via their preferred fashion (listed below) and run npm install themselves.

If you are encountering this issue, here are some potential workarounds:

• Downgrade to NPM 6. This is the current, recommended solution until the issue is fully addressed.
• If you want to make a new Angular project, use ng new --skip-install, to skip automatically running npm install. This should work on NPM 7 for @angular/cli versions 11.2.0 and 12.0.0-next.0.
• If you want to install an Angular project (either just created with ng new --skip-install or an existing one), you can use:
  • npm install --legacy-peer-deps - Opts into legacy package resolution behavior.
  • npm install --force - Ignores the package resolution errors.
  • Add legacy-peer-deps=true to .npmrc in your project root - All npm install commands will automatically pick this up and apply the legacy behavior. Useful if you're on a large team and don't want to force everyone to manually add this flag to every npm install command.

Again, we're hoping these should only be temporary solutions. We are following up with NPM to resolve the blockers and make Angular compatible with NPM 7.

[dgp1130]

Quick update here. TL;DR: ng new can now work on 11.2.0 and 12.0.0-next.0 if you use the --skip-install flag and one of the workarounds in the previous comment. A complete fix for NPM 7 is currently blocked on npm/cli#2615 and npm/arborist#223.

We released Angular CLI versions 11.2.0 and 12.0.0-next.0 which include a clearer error message about current issues with NPM 7 (apologies for the delays, CI was being difficult for this release and we didn't want to cause further breakages). It also ignores this error for ng new --skip-install, which can be a work-around for using ng new with NPM 7. I edited my previous comment to be more clear about the current state of affairs.

We met with some folks from NPM the other day and they have been super helpful in trying to resolve this. Of the original issues mentioned (npm/cli#2553 and npm/cli#2615), only npm/cli#2615 needs to be fixed for Angular right now, as fixing that avoids installing the problem packages that encountered npm/cli#2553.

We tested a fix for npm/cli#2615, but found it was still causing some errors. The NPM team filed npm/arborist#223 to look more into that. Once both these issues are fixed, we're hopeful Angular should become compatible with NPM 7.

[dgp1130]

The NPM team has made some fixes which seem to address this issue and our internal testing has come back positive. We're pushing out a new release of the CLI later today where we'll remove the assertion error for fixed versions of NPM 7. I'll post an another update here once that is released with the relevant version numbers necessary to be compatible.

[dgp1130]

Thanks everyone for your patience, NPM 7 has received some fixes and should be compatible with Angular. We've also released new versions of all supported Angular majors to remove the NPM version assertion error. So everything should work provided you use:

• NPM 7.5.6 or greater.
• Angular CLI 9.1.15, 10.2.3, 11.2.2, 12.0.0-next.2 or greater (within each major version).

If you are using these versions and still encountering unexpected problems, please file a new issue and we'll take a look.