bug: Updating project from v12 to v13 installs v14 dependencies

[jeripeierSBB]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Before version 14.0.0-next.0 was published

Description

When updating a project from version 12 to version 13 with @angular/cdk installed, version 14 in various dependencies are getting installed. This only happens if executing the update in one command: npx @angular/cli@13 update @angular/core@13 @angular/cli@13 @angular/cdk@13. If using separate commands, updating works as expected.

Without @angular/cdk dependency this does not happen, which leads me to place this issue here in components.

Reproduction

Steps to reproduce:

1. Create new v12 app npx @angular/cli@12 new v12app --interactive=false
2. Move to project cd v12app
3. Add @angular/cdk (v12) npx @angular/cli@12 add @angular/cdk@12 --skip-confirmation --defaults
4. Update to v13 npx @angular/cli@13 update @angular/core@13 @angular/cli@13 @angular/cdk@13 --force --allow-dirty
5. See a lot of dependencies in version 14.0.0-next.0

Or as a one liner:
npx @angular/cli@12 new v12app --interactive=false && cd v12app && npx @angular/cli@12 add @angular/cdk@12 --skip-confirmation --defaults && npx @angular/cli@13 update @angular/core@13 @angular/cli@13 @angular/cdk@13 --force --allow-dirty

Expected Behavior

Version 13 dependencies should be installed, especially if specifying with @13.

Actual Behavior

Various 14.0.0-next.0 dependencies are installed:

  "name": "v12app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~14.0.0-next.0",
    "@angular/cdk": "^13.2.0",
    "@angular/common": "~14.0.0-next.0",
    "@angular/compiler": "~14.0.0-next.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~14.0.0-next.0",
    "@angular/platform-browser": "~14.0.0-next.0",
    "@angular/platform-browser-dynamic": "~14.0.0-next.0",
    "@angular/router": "~14.0.0-next.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.1",
    "@angular/cli": "~13.2.1",
    "@angular/compiler-cli": "~14.0.0-next.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.5"
  }
}

Environment

Before update:

Angular CLI: 12.2.16
Node: 14.18.2
Package Manager: npm 6.14.15
OS: darwin x64

Angular: 12.2.16
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.16
@angular-devkit/build-angular   12.2.16
@angular-devkit/core            12.2.16
@angular-devkit/schematics      12.2.16
@angular/cdk                    12.2.13
@schematics/angular             12.2.16
rxjs                            6.6.7
typescript                      4.3.5

After update:

Angular CLI: 13.2.1
Node: 14.18.2
Package Manager: npm 6.14.15
OS: darwin x64

Angular: 13.2.0
... cdk, core

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.1302.1
@angular-devkit/build-angular       13.2.1
@angular-devkit/core                13.2.1
@angular-devkit/schematics          13.2.1
@angular/animations                 14.0.0-next.0
@angular/cli                        13.2.1
@angular/common                     14.0.0-next.0
@angular/compiler                   14.0.0-next.0
@angular/compiler-cli               14.0.0-next.0
@angular/forms                      14.0.0-next.0
@angular/platform-browser           14.0.0-next.0
@angular/platform-browser-dynamic   14.0.0-next.0
@angular/router                     14.0.0-next.0
@schematics/angular                 13.2.1
rxjs                                6.6.7
typescript                          4.5.5

Also tested with yarn as package manager and node 16 and npm 8

[devversion]

I don't think our CDK package does anything surprising here. At first glance it seems like the CLI concludes v14.0.0-next as proper version to satisfy our peer dependency requirement which is: ^13.0.0 || ^14.0.0-0.

https://github.com/angular/components/blob/3523adf71eca4c29b8c8cff1bf90c6f1d15d88ca/packages.bzl#L4

[alan-agius4]

Removing the --force flag actually provides a bit of more context.

➜  v12app git:(master) ✗ ng update @angular/core@13 @angular/cli@13 @angular/cdk@13 --allow-dirty
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 13.2.2 to perform the update.
✔ Package successfully installed.
Repository is not clean. Update changes will be mixed with pre-existing changes.
Using package manager: 'npm'
Collecting installed dependencies...
Found 24 dependencies.
Fetching dependency metadata from registry...
                  Package "@angular-devkit/build-angular" has an incompatible peer dependency to "@angular/compiler-cli" (requires "^13.0.0", would install "14.0.0-next.1")
                  Package "@angular/animations" has an incompatible peer dependency to "@angular/core" (requires "14.0.0-next.1", would install "13.2.1")
                  Package "@angular/common" has an incompatible peer dependency to "@angular/core" (requires "14.0.0-next.1", would install "13.2.1")
                  Package "@angular/animations" has an incompatible peer dependency to "@angular/core" (requires "14.0.0-next.1" (extended), would install "13.2.1").
                  Package "@angular/forms" has an incompatible peer dependency to "@angular/core" (requires "14.0.0-next.1", would install "13.2.1")
                  Package "@angular/platform-browser" has an incompatible peer dependency to "@angular/core" (requires "14.0.0-next.1", would install "13.2.1")
                  Package "@angular/platform-browser-dynamic" has an incompatible peer dependency to "@angular/core" (requires "14.0.0-next.1", would install "13.2.1")
                  Package "@angular/router" has an incompatible peer dependency to "@angular/core" (requires "14.0.0-next.1", would install "13.2.1")
✖ Migration failed: Incompatible peer dependencies found.

Also, running the commands after each other doesn't exhibit the same problem.

➜  v12app git:(master) ✗ ng update @angular/core @angular/cli  --allow-dirty
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 13.2.2 to perform the update.
✔ Package successfully installed.
Repository is not clean. Update changes will be mixed with pre-existing changes.
Using package manager: 'npm'
Collecting installed dependencies...
Found 24 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular-devkit/build-angular @ "13.2.2" (was "12.2.16")...
    Updating package.json with dependency @angular/cli @ "13.2.2" (was "12.2.16")...
    Updating package.json with dependency @angular/compiler-cli @ "13.2.1" (was "12.2.16")...
    Updating package.json with dependency typescript @ "4.5.5" (was "4.3.5")...
    Updating package.json with dependency @angular/animations @ "13.2.1" (was "12.2.16")...
    Updating package.json with dependency @angular/common @ "13.2.1" (was "12.2.16")...
    Updating package.json with dependency @angular/compiler @ "13.2.1" (was "12.2.16")...
    Updating package.json with dependency @angular/core @ "13.2.1" (was "12.2.16")...
    Updating package.json with dependency @angular/forms @ "13.2.1" (was "12.2.16")...
    Updating package.json with dependency @angular/platform-browser @ "13.2.1" (was "12.2.16")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "13.2.1" (was "12.2.16")...
    Updating package.json with dependency @angular/router @ "13.2.1" (was "12.2.16")...
  UPDATE package.json (1099 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/cli' **

❯ Remove polyfills required only for Internet Explorer which is no longer supported.
  UPDATE src/polyfills.ts (2340 bytes)
  Migration completed.

❯ Remove no longer valid Angular schematic options from `angular.json`.
  Migration completed.

❯ Remove deprecated options from 'angular.json' that are no longer present in v13.
  Migration completed.

❯ Updating '.gitignore' to include '.angular/cache'.
  UPDATE .gitignore (620 bytes)
  Migration completed.

❯ Update library projects to be published in partial mode and removed deprecated options from ng-packagr configuration.
  Migration completed.

** Executing migrations of package '@angular/core' **

❯ Migrates `[routerLink]=""` in templates to `[routerLink]="[]"` because these links are likely intended to route to the current page with updated fragment/query params.
  Migration completed.

❯ In Angular version 13, the `teardown` flag in `TestBed` will be enabled by default.
  This migration automatically opts out existing apps from the new teardown behavior.
  Migration completed.

❯ As of Angular version 13, `entryComponents` are no longer necessary.
  Migration completed.

➜  v12app git:(master) ✗ ng update @angular/core @angular/cli @angular/cdk --allow-dirty
➜  v12app git:(master) ✗ ng yup
➜  v12app git:(master) ✗ ng update  @angular/cdk@13 --allow-dirty
Repository is not clean. Update changes will be mixed with pre-existing changes.
Using package manager: 'npm'
Collecting installed dependencies...
Found 24 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular/cdk @ "13.2.1" (was "12.2.13")...
  UPDATE package.json (1098 bytes)

[stevensroczynski]

Exactly the same problem. Following.