NPM 7.6 packages update fail

[tmeghe]

🐞 Bug report

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

Is this a regression?

Yes, it was working with NPM 6, however it seems that it has been fixed with NPM > 7.5.6 (cf. #19957 )

Description

Can't update node packages, I'm using CLI 11.2.2 Node 15.10.0 and NPM 7.6.0

🌍 Your Environment

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


Angular CLI: 11.2.2
Node: 15.10.0
OS: darwin x64

Angular: 11.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1100.7
@angular-devkit/core            11.0.7
@angular-devkit/schematics      11.2.2
@angular/cdk                    11.2.2
@angular/cli                    11.2.2
@angular/flex-layout            10.0.0-beta.32
@angular/material               11.2.2
@schematics/angular             10.2.3
@schematics/update              0.1102.2
rxjs                            6.6.6
typescript                      4.1.5

[alan-agius4]

@tmeghe what is the exact error that you are receiving?

[tmeghe]

The exact error is :

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: app@0.0.0
npm ERR! Found: typescript@4.1.5
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"^4.1.5" from the root project
npm ERR!   peer typescript@">=4.0 <4.2" from @angular/compiler-cli@11.2.3
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     dev @angular/compiler-cli@"^11.2.3" 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!     2 more (@angular/localize, ng-packagr)
npm ERR!   2 more (ng-packagr, tslint)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@"~4.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.
npm ERR!
npm ERR! See /Users/thomas/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/thomas/.npm/_logs/2021-03-02T14_11_23_897Z-debug.log

[alan-agius4]

Which packages are you trying to update? does the above happen during ng update?

The NPM error indicates that you are trying to use TypeScript 4.1.x with an incompatible version of @angular-devkit/build-angular@0.1100.7 which requires TypeScript 4.0.x.

It appears that while the @angular/cli was updated, the @angular-devkit/build-angular packages was not. Did you perform the update of the Angular packages using ng update?

I suspect that the Angular CLI package was updated manually and hence now the packages are no longer in sync. Therefore, I suggest that you run the below

npm i @angular-devkit/build-angular@0.1102.2 -D

[EatonZ]

I have found that deleting your project's node_modules folder and package-lock.json, then running npm install will often clear up "dependency tree" problems.

[itning]

$ng update @angular/cdk @angular/cli @angular/core @angular/material
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 32 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular-devkit/build-angular @ "0.1102.4" (was "0.1102.3")...
    Updating package.json with dependency @angular/cli @ "11.2.4" (was "11.2.3")...
    Updating package.json with dependency @angular/compiler-cli @ "11.2.5" (was "11.2.4")...
    Updating package.json with dependency @angular/animations @ "11.2.5" (was "11.2.4")...
    Updating package.json with dependency @angular/cdk @ "11.2.4" (was "11.2.3")...
    Updating package.json with dependency @angular/common @ "11.2.5" (was "11.2.4")...
    Updating package.json with dependency @angular/compiler @ "11.2.5" (was "11.2.4")...
    Updating package.json with dependency @angular/core @ "11.2.5" (was "11.2.4")...
    Updating package.json with dependency @angular/forms @ "11.2.5" (was "11.2.4")...
    Updating package.json with dependency @angular/material @ "11.2.4" (was "11.2.3")...
    Updating package.json with dependency @angular/platform-browser @ "11.2.5" (was "11.2.4")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "11.2.5" (was "11.2.4")...
    Updating package.json with dependency @angular/router @ "11.2.5" (was "11.2.4")...
    Updating package.json with dependency @angular/service-worker @ "11.2.5" (was "11.2.4")...
  UPDATE package.json (1393 bytes)
- Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @angular/animations@11.2.4
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"~11.2.5" from the root project
npm ERR!   peer @angular/animations@"^11.0.0 || ^12.0.0-0" from @angular/material@11.2.3
npm ERR!   node_modules/@angular/material
npm ERR!     @angular/material@"^11.2.4" from the root project
npm ERR!   1 more (@angular/platform-browser)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/animations@"~11.2.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@11.2.5
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"11.2.5" from @angular/animations@11.2.5
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"~11.2.5" 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 G:\Library_WEB\cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     G:\Library_WEB\cache\_logs\2021-03-13T12_31_39_820Z-debug.log
× Package install failed, see above.
× Migration failed. See above for further details.

[clydin]

This appears to be an issue with npm 7. Can you provide the version of npm 7 being used within the project? If not the latest please update and see if that resolves the issue.
npm 7 appears to be in incorrectly saying that @angular/animations@"~11.2.5" is not compatible with @angular/animations@11.2.5.

[itning]

> npm -v
7.6.3
> node -v
v14.16.0

[EinfachHans]

I get this Error, but i think it's the same causing this:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: app@1.0.0
npm ERR! Found: @angular/compiler@11.2.0
npm ERR! node_modules/@angular/compiler
npm ERR!   dev @angular/compiler@"11.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.2.5" from @angular/platform-browser-dynamic@11.2.5
npm ERR! node_modules/@angular/platform-browser-dynamic
npm ERR!   @angular/platform-browser-dynamic@"11.2.5" 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 -v: 7.6.3
node -v: v14.15.4

[clydin]

@EinfachHans That appears to be a legitimate issue with the dependencies defined in the project's package.json. npm 7 (unlike npm 6) will fail if peer dependency SemVer ranges are not satisfied. From the error, it appears @angular/compiler should be set to 11.2.5 in the package.json to match the other Angular framework packages.

The issue raised by @itning appears to be an actual defect in npm 7 itself. @angular/animations@"~11.2.5" is compatible with @angular/animations@11.2.5 but npm 7 is still failing.

[princemaple]

Is there an npm issue we can go and spam on subscribe to?

There is this npm/cli#2999

[alan-agius4]

Thanks for reporting the issue,. I am unable to replicate this using NPM 7.11.1.