Dependency error when updating from v11 to v12 using "ng update" with v12 cli.

[jdussouillez]

🐞 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?

Well this is the first time I get an error using ng update so it worked fine before the v12.

Description

I'm getting an error on dependencies when updating an Angular app from v11 to v12 using ng update.

🔬 Minimal Reproduction

• Create a v11 app
• Update it to 12.1.0 using ng update

npx -p @angular/cli@11.2.14 ng new testapp \
    --routing true \
    --style scss \
    --strict true \
    --package-manager npm \
    && cd testapp \
    && ng update @angular/core@12.1.0 @angular/cli@12.1.0

🔥 Exception or Error

```
[...]
CREATE testapp/e2e/src/app.po.ts (274 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
Using package manager: 'npm'
Collecting installed dependencies...
Found 28 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular-devkit/build-angular @ "12.1.0" (was "0.1102.14")...
    Updating package.json with dependency @angular/cli @ "12.1.0" (was "11.2.14")...
    Updating package.json with dependency @angular/compiler-cli @ "12.1.0" (was "11.2.14")...
    Updating package.json with dependency karma @ "6.3.4" (was "6.1.2")...
    Updating package.json with dependency typescript @ "4.3.4" (was "4.1.6")...
    Updating package.json with dependency @angular/animations @ "12.1.0" (was "11.2.14")...
    Updating package.json with dependency @angular/common @ "12.1.0" (was "11.2.14")...
    Updating package.json with dependency @angular/compiler @ "12.1.0" (was "11.2.14")...
    Updating package.json with dependency @angular/core @ "12.1.0" (was "11.2.14")...
    Updating package.json with dependency @angular/forms @ "12.1.0" (was "11.2.14")...
    Updating package.json with dependency @angular/platform-browser @ "12.1.0" (was "11.2.14")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "12.1.0" (was "11.2.14")...
    Updating package.json with dependency @angular/router @ "12.1.0" (was "11.2.14")...
  UPDATE package.json (1194 bytes)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: @angular-devkit/build-angular@0.1102.14
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~12.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"~12.1.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/compiler-cli@12.1.0
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^12.0.0 || ^12.1.0-next" from @angular-devkit/build-angular@12.1.0
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~12.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! See /home/junior/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/junior/.npm/_logs/2021-06-25T12_34_42_916Z-debug.log
✖ Package install failed, see above.
```

🌍 Your Environment

My env (updated to v12.1.0 this morning). It seems to be the same problem : a dependency error with some packages.

Angular CLI: 12.1.0
Node: 14.16.1
Package Manager: npm 7.19.0
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.0 (cli-only)
@angular-devkit/build-angular   <error>
@angular-devkit/core            12.1.0 (cli-only)
@angular-devkit/schematics      12.1.0 (cli-only)
@angular/cli                    12.1.0 (cli-only)
@schematics/angular             12.1.0 (cli-only)
rxjs                            6.6.7 (cli-only)
typescript                      <error>

A co-worker's env - He has the same error

Angular CLI: 12.1.0
Node: 14.16.1
Package Manager: npm 7.19.0
OS: linux x64
Angular: 
... 
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1201.0 (cli-only)
@angular-devkit/core         12.1.0 (cli-only)
@angular-devkit/schematics   12.1.0 (cli-only)
@schematics/angular          12.1.0 (cli-only)

Another coworker's env - it works fine, no error

Angular CLI: 11.2.2
Node: 14.17.1
OS: win32 x64
Angular: 11.2.2
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, router
... service-worker
Ivy Workspace: Yes
Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.2
@angular-devkit/build-angular   0.1102.2
@angular-devkit/core            11.2.2
@angular-devkit/schematics      11.2.2
@angular/pwa                    0.1102.2
@schematics/angular             11.2.2
@schematics/update              0.1102.2
rxjs                            6.6.3
typescript                      4.1.5

It works for him, I guess because it's still using the v11 cli
I tried again after I downgraded my global cli to v11.2.2 (npm i -g @angular/cli@11.2.2) but I still got the same error.

I also upgraded my node to v14.17.1, but same error.

[clydin]

The dependency @angular/compiler-cli@12.1.0 satisfies the SemVer dependency range of @angular/compiler-cli@"^12.0.0 || ^12.1.0-next" shown in the above log output. This appears to be a defect within npm 7.

Several options to workaround the problem with npm 7 include:

• passing the --force option to ng update which will propagate the force flag to npm.
• Downgrade to npm 6
• Switch to yarn as a package manager

[jdussouillez]

@clydin Thanks ! The --force flag did the trick.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}