angular-cli
angular-cli copied to clipboard
angular
bug: Updating project from v12 to v13 installs v14 dependencies
Is this a regression?
- [X] 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:
- Create new v12 app
npx @angular/cli@12 new v12app --interactive=false - Move to project
cd v12app - Add @angular/cdk (v12)
npx @angular/cli@12 add @angular/cdk@12 --skip-confirmation --defaults - Update to v13
npx @angular/cli@13 update @angular/core@13 @angular/cli@13 @angular/cdk@13 --force --allow-dirty - 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
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
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)
I am having the same issue.
npx @angular/cli@13 update @angular/cdk@13 --force causes
Package "@angular-devkit/build-angular" has an incompatible peer dependency to "@angular/compiler-cli" (requires "^12.0.0" (extended), would install "14.0.5").
Package "@angular-devkit/build-angular" has an incompatible peer dependency to "@angular/localize" (requires "^12.0.0" (extended), would install "14.0.5").
Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires "~4.2.3 || ~4.3.2", would install "4.7.4").
Package "@angular-eslint/eslint-plugin" has an incompatible peer dependency to "@angular/compiler" (requires ">= 12.0.0 < 13.0.0" (extended), would install "14.0.5").
What worked for me is updating @angular-devkit/build-angular manually with a fixed version:
npx @angular/cli@13 update @angular-devkit/build-angular@13 @angular/cdk@13 --force
In some of the cases where I experienced this, it was resolved by deleting the package-lock.json file. More often, the issue was that a package declared a peer dependency that supported both 13 and 14, .ie. ^13.0.0 || ^14.0.0, and npm would pick 14.0.0. That seems like a bug in npm that can be worked around by declaring the peer dependency explicitly in package.json.
I ran into the @angular-devkit/build-angular peer dependency issue specifically, and upgrading to npm 8.15 resolved it. :sunglasses:
We're seeing this issue as well, specifically when people are running update migrations in our packages. If they run ng update and specify an older version to update, it updates the Angular packages to their latest versions.
