Wanna see something cool? Check out Angular Spotify 🎧

Upgrading from Angular 12 to 15 in Nx Workspace: A Comprehensive Guide

I am currently preparing for a talk at Web Directions Code 2023 about CSS container queries.

However, I have encountered an issue with CSS containers in Angular 12, and it seems that upgrading to Angular 15 is necessary to resolve the issue.

The problem is related to the @container style not being properly emulated into the component. This issue has been causing some difficulties in my preparation for the talk.

https://github.com/angular/angular/issues/48264

The disaster with nx migrate latest

angular-spotify is using [email protected] and the latest version is 15.2.8

I straight away try running nx migrate latest to update to the latest version

> nx migrate latest
> node --version
v12.22.12

> nvm use 16
Now using node v16.15.1 (npm v8.11.0)

> nx migrate latest

> nx migrate --run-migrations

NX   Running 'npm install' to make sure necessary packages are installed

npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile

Migrate from Angular 12 to 15 in Nx

Despite my initial optimism, I encountered numerous issues when attempting to execute nx migrate --run-migrations. These issues proved to be quite challenging to resolve, and included errors such as:

  • Failed to parse npm lockfile
  • Failed to run update-tsconfig-target from @nrwl/angular. This workspace is NOT up to date!
  • Failed to run update-platform-server-exports from @nrwl/angular. This workspace is NOT up to date!
  • β€˜rule’ is not a function

Despite my best efforts, these issues proved to be impossible to fix. This experience highlights the importance of thoroughly testing and preparing for major upgrades, as even seemingly minor issues can quickly snowball into major problems.

Migrate from Angular 12 to 15 in Nx

Migrate from Angular 12 to 15 in Nx

To avoid further complications, I decided to break down the upgrade process into multiple steps. This approach not only helps me to avoid errors but also allows me to experiment with the codebase more effectively.

While I had initially planned to take this approach, the issues I encountered reinforced the importance of taking a cautious and methodical approach to upgrading.

Proper migration strategy

Thus I decided to do the migration in multiple steps. How? I refer to this Nx and Angular Version Compatibility Matrix.

Migrate from Angular 12 to 15 in Nx

Therefore, I’ve made the decision to migrate from Angular 12 to 13 first, then to 14, and finally to 15.

In line with that, I’ll also be upgrading Nx from 12.5.2 to 14.1.9 (which supports Angular 13), and then to 15.2.0, and finally to the latest version.

It’s worth mentioning that I skipped Nx 13 since it doesn’t yet support Angular 13, and everything is still functioning smoothly.

1. nx migrate 14.1.9 (support Angular 13)

See a full log of nx migrate 14.1.9 
> nx migrate 14.1.9

Fetching meta data about packages.
It may take a few minutes.
Fetching [email protected]
Fetching @nrwl/[email protected]
Fetching @nrwl/[email protected]
Fetching @nrwl/[email protected]
Fetching @nrwl/[email protected]
Fetching @nrwl/[email protected]
Fetching @angular/[email protected]
Fetching @ngrx/[email protected]
Fetching @ngrx/[email protected]
Fetching @angular/[email protected]
Fetching @angular/cli@~13.3.0
Fetching @ngrx/[email protected]
Fetching @ngrx/[email protected]
Fetching @ngrx/[email protected]

>  NX   The migrate command has run successfully.

- package.json has been updated.
- migrations.json has been generated.

>  NX   Next steps:

- Make sure package.json changes make sense and then run 'yarn',
- Run 'yarn nx migrate --run-migrations'
- To learn more go to https://nx.dev/core-features/automate-updating-dependencies
> yarn nx migrate --run-migrations --create-commits

>  NX  Running migrations from 'migrations.json', with each applied in a dedicated commit

Running migration 14-0-6-remove-root
Successfully finished 14-0-6-remove-root
- Commit created for changes: fdbbae302748b868e78e81f04c973fd8c8317867
---------------------------------------------------------
Running migration update-invalid-import-paths
Successfully finished update-invalid-import-paths
- Commit created for changes: 972b8d10118b898753592ffe3fc2c98b023ff56d
---------------------------------------------------------
Running migration add-postcss-packages
Successfully finished add-postcss-packages
- There were no changes to commit
---------------------------------------------------------
Running migration update-angular-config
Successfully finished update-angular-config
- There were no changes to commit
---------------------------------------------------------
Running migration update-libraries
Successfully finished update-libraries
- There were no changes to commit
---------------------------------------------------------
Running migration update-angular-jest-config
Successfully finished update-angular-jest-config
- Commit created for changes: 325354d83ff4260a87b28e2175558d8706bf1eac
---------------------------------------------------------
Running migration update-testing-imports
Successfully finished update-testing-imports
- There were no changes to commit
---------------------------------------------------------
Running migration opt-out-testbed-teardown
Successfully finished opt-out-testbed-teardown
- Commit created for changes: 29ae169b5246d60fc6446e511d79b23741f750bd
---------------------------------------------------------
Running migration update-mfe-config-to-module-syntax
Successfully finished update-mfe-config-to-module-syntax
- There were no changes to commit
---------------------------------------------------------
Running migration remove-library-generator-style-default
Successfully finished remove-library-generator-style-default
- Commit created for changes: 25c8f450bfd6e0ddc9e6199feef4bf0a04c00d52
---------------------------------------------------------
Running migration fix-incorrect-mfe-setups
Successfully finished fix-incorrect-mfe-setups
- There were no changes to commit
---------------------------------------------------------
Running migration add-cypress-mfe-workaround
Successfully finished add-cypress-mfe-workaround
- There were no changes to commit
---------------------------------------------------------
Running migration migrate-karma-config
Successfully finished migrate-karma-config
- There were no changes to commit
---------------------------------------------------------
Running migration set-build-libs-from-source
Successfully finished set-build-libs-from-source
- There were no changes to commit
---------------------------------------------------------
Running migration rename-module-federation-config
Successfully finished rename-module-federation-config
- There were no changes to commit
---------------------------------------------------------
Running migration set-default-base-if-not-set
Successfully finished set-default-base-if-not-set
- There were no changes to commit
---------------------------------------------------------
Running migration 13-0-0-config-locations
Successfully finished 13-0-0-config-locations
- Commit created for changes: 066d71ef0bb40fe809b202e9c29ba39344e8ae6e
---------------------------------------------------------
Running migration set-parallel-default
Successfully finished set-parallel-default
- Commit created for changes: f897090e59eee9c4ec5770b8fc26ac354a5c52ff
---------------------------------------------------------
Running migration 13-3-0-tsc-location
Successfully finished 13-3-0-tsc-location
- There were no changes to commit
---------------------------------------------------------
Running migration 13-6-0-remove-old-task-runner-options
Successfully finished 13-6-0-remove-old-task-runner-options
- Commit created for changes: c5826fc8c18e1589427a51995a19a629da87989e
---------------------------------------------------------
Running migration 13-9-0-replace-tao-with-nx
Please run yarn to ensure the correct version of Nx is installed.
Successfully finished 13-9-0-replace-tao-with-nx
- Commit created for changes: 4a240af6dbdd5aba2bb1c8048c2f6b01614ac496
---------------------------------------------------------
Running migration 13-10-0-update-decorate-cli
Successfully finished 13-10-0-update-decorate-cli
- There were no changes to commit
---------------------------------------------------------
Running migration 13-10-0-update-tasks-runner
Successfully finished 13-10-0-update-tasks-runner
- There were no changes to commit
---------------------------------------------------------
Running migration 14-0-0-change-nx-json-presets
Successfully finished 14-0-0-change-nx-json-presets
- There were no changes to commit
---------------------------------------------------------
Running migration 14-0-0-change-npm-script-executor
Successfully finished 14-0-0-change-npm-script-executor
- There were no changes to commit
---------------------------------------------------------
Running migration remove-typescript-plugin
Successfully finished remove-typescript-plugin
- There were no changes to commit
---------------------------------------------------------
Running migration add-outputs
Successfully finished add-outputs
- Commit created for changes: 2686c67a14f1440aa37a0f43f76d2ed790d1fbf0
---------------------------------------------------------
Running migration remove-eslint-project-config-if-no-type-checking-rules-again
Successfully finished remove-eslint-project-config-if-no-type-checking-rules-again
- There were no changes to commit
---------------------------------------------------------
Running migration eslint-8-updates
Successfully finished eslint-8-updates
- There were no changes to commit
---------------------------------------------------------
Running migration update-jest-config-to-use-util
Successfully finished update-jest-config-to-use-util
- Commit created for changes: 3de59c7be81310dba231ac74023fb9e5b934d03e
---------------------------------------------------------
Running migration update-ts-config-for-test-filenames
Unable to update libs/web/shared/data-access/spotify-api/tsconfig.lib.json.
Successfully finished update-ts-config-for-test-filenames
- Commit created for changes: 432f9e8d855c3e5779e6aa5956e70beabe9a6f49
---------------------------------------------------------
Running migration add-missing-root-babel-config
Successfully finished add-missing-root-babel-config
- There were no changes to commit
---------------------------------------------------------
Running migration update-jest-config-extensions
Nx Unable to update libs/web/shared/data-access/spotify-api/tsconfig.lib.json. Please manually ignore the jest.config.ts file.
Successfully finished update-jest-config-extensions
- Commit created for changes: 9db789c3a98a5e48479800bc39c7b755e2f507f9
---------------------------------------------------------
Running migration update-to-export-default
Successfully finished update-to-export-default
- Commit created for changes: 601886d11498f56daa90dbc56f0d3e4eed604e00
---------------------------------------------------------
Running migration ngrx-store-migration-13-beta
Successfully finished ngrx-store-migration-13-beta
- There were no changes to commit
---------------------------------------------------------
Running migration ngrx-store-migration-13-rc
Successfully finished ngrx-store-migration-13-rc
- There were no changes to commit
---------------------------------------------------------
Running migration migration-v13-router-link-empty-expression
Successfully finished migration-v13-router-link-empty-expression
- There were no changes to commit
---------------------------------------------------------
Running migration migration-v13-testbed-teardown
Successfully finished migration-v13-testbed-teardown
- There were no changes to commit
---------------------------------------------------------
Running migration migration-v13.1-entry-components
Successfully finished migration-v13.1-entry-components
- There were no changes to commit
---------------------------------------------------------
Running migration ngrx-effects-migration-03
Successfully finished ngrx-effects-migration-03
- There were no changes to commit
---------------------------------------------------------
Running migration schematic-options-13
Successfully finished schematic-options-13
- There were no changes to commit
---------------------------------------------------------
Running migration update-angular-config-v13
Successfully finished update-angular-config-v13
- There were no changes to commit
---------------------------------------------------------
Running migration update-libraries-v13
Successfully finished update-libraries-v13
- There were no changes to commit
---------------------------------------------------------
Running migration drop-ie-polyfills
Successfully finished drop-ie-polyfills
- Commit created for changes: fd4ec7906196569dc3bcbfa1fb8f94ff80ec6d2b
---------------------------------------------------------
Running migration update-gitignore
Successfully finished update-gitignore
- Commit created for changes: 221fa6348b88cb29ee4bf793cfb7e1b1bffeb795
---------------------------------------------------------

>  NX  Successfully finished running migrations from 'migrations.json'

2. nx migrate 15.2.0 (support Angular 14 and above)

See a full log of nx migrate 15.2.0 
> nx migrate 15.2.0

> NX βœ… This workspace is already connected to Nx Cloud.

This means your workspace can use computation caching, distributed task execution, and show you run analytics.
Go to https://nx.app to learn more.
trung.vo@trung ξ‚° ~/Source/angular-spotify ξ‚° ξ‚  trung/angular-15 Β± ξ‚° yarn nx migrate --run-migrations --create-commits
yarn run v1.22.19
$ nx migrate --run-migrations --create-commits

> NX Running 'yarn' to make sure necessary packages are installed

[1/4] πŸ” Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] πŸ”— Linking dependencies...
warning " > @ngrx/[email protected]" has incorrect peer dependency "@angular/common@^14.0.0".
warning " > @ngrx/[email protected]" has incorrect peer dependency "@angular/core@^14.0.0".
warning " > @ngrx/[email protected]" has incorrect peer dependency "@angular/core@^14.0.0".
warning " > @ngrx/[email protected]" has incorrect peer dependency "@angular/core@^14.0.0".
warning " > @ngrx/[email protected]" has incorrect peer dependency "@angular/core@^14.0.0".
warning "@nrwl/angular > @nrwl/webpack > [email protected]" has unmet peer dependency "@babel/core@^7.0.0".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > [email protected]" has incorrect peer dependency "@angular/animations@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/common@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/forms@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/platform-browser@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/router@^11.0.4".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/core@^11.0.0 || ^12.0.0-0".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/common@^11.0.0 || ^12.0.0-0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/common@^11.0.5".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/core@^11.0.5".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/platform-browser@^11.0.0".
[4/4] πŸ”¨ Building fresh packages...
success Saved lockfile.
$ node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main && husky install

> NX Angular CLI has been decorated to enable computation caching.
> husky - Git hooks installed
> nx migrate --run-migrations --create-commits

> NX Running migrations from 'migrations.json', with each applied in a dedicated commit

Ran 14-2-0-add-json-schema from nx
Add JSON Schema to Nx configuration files

UPDATE nx.json
UPDATE angular.json

- Commit created for changes: 8eda85987526ebbb0253a9021f51015fd00fd36a

---

Ran 14-2-0-remove-default-collection from nx
Remove default collection from configuration to switch to prompts for collection

UPDATE nx.json

- Commit created for changes: 8a5d68b4b19bf1a0f4a3856194bec6c491d13058

---

Ran 14.3.4-create-target-defaults from nx
Replace targetDependencies with targetDefaults

UPDATE nx.json

- Commit created for changes: 348d85e4845308d3bc5539532c7d7ce4711a71bc

---

Ran 15.0.0-migrate-to-inputs from nx
Replace implicitDependencies with namedInputs + target inputs

UPDATE nx.json

- Commit created for changes: 026753402d445ba9f45bd6e3b6dee6afdc72b368

---

Ran 15.0.0-prefix-outputs from nx
Prefix outputs with {workspaceRoot}/{projectRoot} if needed

UPDATE angular.json

- Commit created for changes: 5914df2633fb6194c7014030162f61974cca0361

---

Ran 15.1.0-set-project-names from nx
Set project names in project.json files

UPDATE apps/angular-spotify/project.json
UPDATE libs/web/album/data-access/project.json
UPDATE libs/web/artist/data-access/project.json
UPDATE libs/web/artist/feature/project.json
UPDATE libs/web/auth/data-access/project.json
UPDATE libs/web/auth/util/project.json
UPDATE libs/web/browse/data-access/project.json
UPDATE libs/web/home/data-access/project.json
UPDATE libs/web/home/feature/project.json
UPDATE libs/web/playlist/data-access/project.json
UPDATE libs/web/search/data-access/project.json
UPDATE libs/web/search/feature/project.json
UPDATE libs/web/settings/data-access/project.json
UPDATE libs/web/settings/feature/project.json
UPDATE libs/web/shared/app-config/project.json
UPDATE libs/web/shared/assets/project.json
UPDATE libs/web/shared/utils/project.json
UPDATE libs/web/shell/feature/project.json
UPDATE libs/web/tracks/data-access/project.json
UPDATE libs/web/tracks/feature/project.json
UPDATE libs/web/visualizer/data-access/project.json
UPDATE libs/web/visualizer/feature/project.json
UPDATE libs/web/visualizer/ui/project.json
UPDATE libs/web/album/feature/detail/project.json
UPDATE libs/web/album/feature/list/project.json
UPDATE libs/web/album/feature/shell/project.json
UPDATE libs/web/album/ui/album-track/project.json
UPDATE libs/web/artist/ui/artist-top-track/project.json
UPDATE libs/web/artist/ui/artist-top-tracks/project.json
UPDATE libs/web/auth/ui/unauthorized-modal/project.json
UPDATE libs/web/browse/feature/categories/project.json
UPDATE libs/web/browse/feature/category/project.json
UPDATE libs/web/browse/feature/shell/project.json
UPDATE libs/web/browse/ui/category-cover/project.json
UPDATE libs/web/home/ui/featured-playlists/project.json
UPDATE libs/web/home/ui/greeting/project.json
UPDATE libs/web/home/ui/recent-played/project.json
UPDATE libs/web/playlist/feature/detail/project.json
UPDATE libs/web/playlist/feature/list/project.json
UPDATE libs/web/playlist/ui/playlist-track/project.json
UPDATE libs/web/shared/data-access/models/project.json
UPDATE libs/web/shared/data-access/spotify-api/project.json
UPDATE libs/web/shared/data-access/store/project.json
UPDATE libs/web/shared/directives/click-stop-propagation/project.json
UPDATE libs/web/shared/pipes/duration-pipe/project.json
UPDATE libs/web/shared/ui/icon/project.json
UPDATE libs/web/shared/ui/input/project.json
UPDATE libs/web/shared/ui/media/project.json
UPDATE libs/web/shared/ui/media-cover/project.json
UPDATE libs/web/shared/ui/media-order/project.json
UPDATE libs/web/shared/ui/media-summary/project.json
UPDATE libs/web/shared/ui/media-table/project.json
UPDATE libs/web/shared/ui/play-button/project.json
UPDATE libs/web/shared/ui/playlist-list/project.json
UPDATE libs/web/shared/ui/spinner/project.json
UPDATE libs/web/shared/ui/track-current-info/project.json
UPDATE libs/web/shared/ui/track-main-info/project.json
UPDATE libs/web/shared/ui/tracks-loading/project.json
UPDATE libs/web/shared/ui/work-in-progress/project.json
UPDATE libs/web/shell/ui/album-art-overlay/project.json
UPDATE libs/web/shell/ui/layout/project.json
UPDATE libs/web/shell/ui/main-view/project.json
UPDATE libs/web/shell/ui/nav-bar/project.json
UPDATE libs/web/shell/ui/nav-bar-playlist/project.json
UPDATE libs/web/shell/ui/now-playing-bar/project.json
UPDATE libs/web/shell/ui/player-controls/project.json
UPDATE libs/web/shell/ui/player-playback/project.json
UPDATE libs/web/shell/ui/player-volume/project.json
UPDATE libs/web/shell/ui/social-share/project.json
UPDATE libs/web/shell/ui/top-bar/project.json
UPDATE libs/web/shell/ui/user-dropdown/project.json
UPDATE libs/web/shell/ui/visualization-toggle/project.json

- Commit created for changes: 4d4c04edcbe6da9a56b35df97df53e2fc313bbe9

---

Ran exclude-jest-config-from-ts-config from @nrwl/jest
Exclude jest.config.ts from tsconfig where missing.

UPDATE libs/web/shared/data-access/spotify-api/tsconfig.lib.json

- Commit created for changes: 504ac808bbcd7a447a5b24481ee91f1dfe61b299

---

Ran update-configs-jest-28 from @nrwl/jest
Update jest configs to support jest 28 changes (https://jestjs.io/docs/upgrading-to-jest28#configuration-options)

UPDATE package.json

- Commit created for changes: b5de988aaad4016d7aa72e8f3d58643869868df6

---

Ran add-jest-inputs from @nrwl/jest
Stop hashing jest spec files and config files for build targets and dependent tasks

UPDATE nx.json

- Commit created for changes: 78aa51c9e9728697ac1e797d4351632efa1a7748

---

Ran update-angular-cli-version from @nrwl/angular
Update the @angular/cli package version.

UPDATE package.json

- Commit created for changes: f5fc0ec57aec1dde36398cbcf7515ae958602fe6

---

Ran update-postinstall-script-ngcc-target from @nrwl/angular
Update postinstall script running ngcc to use ES2020 target.

UPDATE package.json

- Commit created for changes: 8af412b8dd9e3c9c82baaa23560b748ee11b22c3

---

Ran update-tsconfig-target from @nrwl/angular
Update TypeScript compilation target to 'ES2020'.

UPDATE libs/web/shared/directives/click-stop-propagation/tsconfig.json
UPDATE libs/web/shared/data-access/spotify-api/tsconfig.json
UPDATE libs/web/shell/ui/visualization-toggle/tsconfig.json
UPDATE libs/web/shared/ui/track-current-info/tsconfig.json
UPDATE libs/web/artist/ui/artist-top-tracks/tsconfig.json
UPDATE libs/web/artist/ui/artist-top-track/tsconfig.json
UPDATE libs/web/auth/ui/unauthorized-modal/tsconfig.json
UPDATE libs/web/home/ui/featured-playlists/tsconfig.json
UPDATE libs/web/playlist/ui/playlist-track/tsconfig.json
UPDATE libs/web/shared/pipes/duration-pipe/tsconfig.json
UPDATE libs/web/shared/ui/work-in-progress/tsconfig.json
UPDATE libs/web/shell/ui/album-art-overlay/tsconfig.json
UPDATE libs/web/browse/feature/categories/tsconfig.json
UPDATE libs/web/shared/ui/track-main-info/tsconfig.json
UPDATE libs/web/shell/ui/nav-bar-playlist/tsconfig.json
UPDATE libs/web/browse/ui/category-cover/tsconfig.json
UPDATE libs/web/shared/data-access/store/tsconfig.json
UPDATE libs/web/shared/ui/tracks-loading/tsconfig.json
UPDATE libs/web/shell/ui/now-playing-bar/tsconfig.json
UPDATE libs/web/shell/ui/player-controls/tsconfig.json
UPDATE libs/web/shell/ui/player-playback/tsconfig.json
UPDATE libs/web/browse/feature/category/tsconfig.json
UPDATE libs/web/playlist/feature/detail/tsconfig.json
UPDATE libs/web/shared/ui/media-summary/tsconfig.json
UPDATE libs/web/shared/ui/playlist-list/tsconfig.json
UPDATE libs/web/shell/ui/player-volume/tsconfig.json
UPDATE libs/web/shell/ui/user-dropdown/tsconfig.json
UPDATE libs/web/visualizer/data-access/tsconfig.json
UPDATE libs/web/home/ui/recent-played/tsconfig.json
UPDATE libs/web/playlist/feature/list/tsconfig.json
UPDATE libs/web/shared/ui/media-cover/tsconfig.json
UPDATE libs/web/shared/ui/media-order/tsconfig.json
UPDATE libs/web/shared/ui/media-table/tsconfig.json
UPDATE libs/web/shared/ui/play-button/tsconfig.json
UPDATE libs/web/shell/ui/social-share/tsconfig.json
UPDATE libs/web/album/feature/detail/tsconfig.json
UPDATE libs/web/album/ui/album-track/tsconfig.json
UPDATE libs/web/browse/feature/shell/tsconfig.json
UPDATE libs/web/playlist/data-access/tsconfig.json
UPDATE libs/web/settings/data-access/tsconfig.json
UPDATE libs/web/album/feature/shell/tsconfig.json
UPDATE libs/web/album/feature/list/tsconfig.json
UPDATE libs/web/artist/data-access/tsconfig.json
UPDATE libs/web/browse/data-access/tsconfig.json
UPDATE libs/web/search/data-access/tsconfig.json
UPDATE libs/web/shell/ui/main-view/tsconfig.json
UPDATE libs/web/tracks/data-access/tsconfig.json
UPDATE libs/web/visualizer/feature/tsconfig.json
UPDATE libs/web/album/data-access/tsconfig.json
UPDATE libs/web/shared/app-config/tsconfig.json
UPDATE libs/web/shared/ui/spinner/tsconfig.json
UPDATE libs/web/auth/data-access/tsconfig.json
UPDATE libs/web/home/data-access/tsconfig.json
UPDATE libs/web/home/ui/greeting/tsconfig.json
UPDATE libs/web/settings/feature/tsconfig.json
UPDATE libs/web/shell/ui/nav-bar/tsconfig.json
UPDATE libs/web/shell/ui/top-bar/tsconfig.json
UPDATE libs/web/shared/app-init/tsconfig.json
UPDATE libs/web/shared/ui/input/tsconfig.json
UPDATE libs/web/shared/ui/media/tsconfig.json
UPDATE libs/web/shell/ui/layout/tsconfig.json
UPDATE libs/web/artist/feature/tsconfig.json
UPDATE libs/web/search/feature/tsconfig.json
UPDATE libs/web/shared/ui/icon/tsconfig.json
UPDATE libs/web/tracks/feature/tsconfig.json
UPDATE libs/web/shell/feature/tsconfig.json
UPDATE libs/web/visualizer/ui/tsconfig.json
UPDATE libs/web/home/feature/tsconfig.json
UPDATE apps/angular-spotify/tsconfig.json
UPDATE libs/web/auth/util/tsconfig.json

- Commit created for changes: 81f0a5670a0fdd9f7131e5dbca1830154e54b64a

---

Ran update-angular-cli-version-14-1-0 from @nrwl/angular
Update the @angular/cli package version to ~14.1.0.

UPDATE package.json

- Commit created for changes: 9d39a2e9eb26fae063e8e34bba4ecbc4ff49904c

---

Ran update-angular-cli-version-14-2-0 from @nrwl/angular
Update the @angular/cli package version to ~14.2.0.

UPDATE package.json

- Commit created for changes: 345ec3a60645f7837c0d1c215f02335a1a064804

---

Ran update-angular-cli-version-15-0-0 from @nrwl/angular
Update the @angular/cli package version to ~15.0.0.

UPDATE package.json

- Commit created for changes: 2ae14b1641e043c0d0540a1262bc79a3dd500880

---

Ran remove-browserlist-config from @nrwl/angular
Remove browserlist config as it's handled by build-angular

DELETE apps/angular-spotify/.browserslistrc

- Commit created for changes: 6e48af0215db5859886e48c2d2a7fa7a76fc4a1c

---

Ran update-typescript-target from @nrwl/angular
Update typescript target to ES2022

UPDATE apps/angular-spotify/tsconfig.app.json

- Commit created for changes: 2091c12a721c9e5c1a46fb5c67153e62a222d5e3

---

[NX] Angular devkit readJsonWorkspace fell back to Nx workspaces logic
Project 'web-shared-directives-click-stop-propagation' contains extension with invalid name (files).
Project 'web-shared-data-access-spotify-api' contains extension with invalid name (files).
Project 'web-shell-ui-visualization-toggle' contains extension with invalid name (files).
Project 'web-shared-ui-track-current-info' contains extension with invalid name (files).
Project 'web-artist-ui-artist-top-tracks' contains extension with invalid name (files).
Project 'web-artist-ui-artist-top-track' contains extension with invalid name (files).
Project 'web-auth-ui-unauthorized-modal' contains extension with invalid name (files).
Project 'web-home-ui-featured-playlists' contains extension with invalid name (files).
Project 'web-playlist-ui-playlist-track' contains extension with invalid name (files).
Project 'web-shared-pipes-duration-pipe' contains extension with invalid name (files).
Project 'web-shared-ui-work-in-progress' contains extension with invalid name (files).
Project 'web-shell-ui-album-art-overlay' contains extension with invalid name (files).
Project 'web-browse-feature-categories' contains extension with invalid name (files).
Project 'web-shared-data-access-models' contains extension with invalid name (files).
Project 'web-shared-ui-track-main-info' contains extension with invalid name (files).
Project 'web-shell-ui-nav-bar-playlist' contains extension with invalid name (files).
Project 'web-browse-ui-category-cover' contains extension with invalid name (files).
Project 'web-shared-data-access-store' contains extension with invalid name (files).
Project 'web-shared-ui-tracks-loading' contains extension with invalid name (files).
Project 'web-shell-ui-now-playing-bar' contains extension with invalid name (files).
Project 'web-shell-ui-player-controls' contains extension with invalid name (files).
Project 'web-shell-ui-player-playback' contains extension with invalid name (files).
Project 'web-browse-feature-category' contains extension with invalid name (files).
Project 'web-playlist-feature-detail' contains extension with invalid name (files).
Project 'web-shared-ui-media-summary' contains extension with invalid name (files).
Project 'web-shared-ui-playlist-list' contains extension with invalid name (files).
Project 'web-shell-ui-player-volume' contains extension with invalid name (files).
Project 'web-shell-ui-user-dropdown' contains extension with invalid name (files).
Project 'web-visualizer-data-access' contains extension with invalid name (files).
Project 'web-home-ui-recent-played' contains extension with invalid name (files).
Project 'web-playlist-feature-list' contains extension with invalid name (files).
Project 'web-shared-ui-media-cover' contains extension with invalid name (files).
Project 'web-shared-ui-media-order' contains extension with invalid name (files).
Project 'web-shared-ui-media-table' contains extension with invalid name (files).
Project 'web-shared-ui-play-button' contains extension with invalid name (files).
Project 'web-shell-ui-social-share' contains extension with invalid name (files).
Project 'web-album-feature-detail' contains extension with invalid name (files).
Project 'web-album-ui-album-track' contains extension with invalid name (files).
Project 'web-browse-feature-shell' contains extension with invalid name (files).
Project 'web-playlist-data-access' contains extension with invalid name (files).
Project 'web-settings-data-access' contains extension with invalid name (files).
Project 'web-album-feature-shell' contains extension with invalid name (files).
Project 'web-album-feature-list' contains extension with invalid name (files).
Project 'web-artist-data-access' contains extension with invalid name (files).
Project 'web-browse-data-access' contains extension with invalid name (files).
Project 'web-search-data-access' contains extension with invalid name (files).
Project 'web-shell-ui-main-view' contains extension with invalid name (files).
Project 'web-tracks-data-access' contains extension with invalid name (files).
Project 'web-visualizer-feature' contains extension with invalid name (files).
Project 'web-album-data-access' contains extension with invalid name (files).
Project 'web-shared-app-config' contains extension with invalid name (files).
Project 'web-shared-ui-spinner' contains extension with invalid name (files).
Project 'web-auth-data-access' contains extension with invalid name (files).
Project 'web-home-data-access' contains extension with invalid name (files).
Project 'web-home-ui-greeting' contains extension with invalid name (files).
Project 'web-settings-feature' contains extension with invalid name (files).
Project 'web-shell-ui-nav-bar' contains extension with invalid name (files).
Project 'web-shell-ui-top-bar' contains extension with invalid name (files).
Project 'web-shared-app-init' contains extension with invalid name (files).
Project 'web-shared-ui-input' contains extension with invalid name (files).
Project 'web-shared-ui-media' contains extension with invalid name (files).
Project 'web-shell-ui-layout' contains extension with invalid name (files).
Project 'web-artist-feature' contains extension with invalid name (files).
Project 'web-search-feature' contains extension with invalid name (files).
Project 'web-shared-ui-icon' contains extension with invalid name (files).
Project 'web-tracks-feature' contains extension with invalid name (files).
Project 'web-shared-assets' contains extension with invalid name (files).
Project 'web-shell-feature' contains extension with invalid name (files).
Project 'web-visualizer-ui' contains extension with invalid name (files).
Project 'web-home-feature' contains extension with invalid name (files).
Project 'web-shared-utils' contains extension with invalid name (files).
Project 'angular-spotify' contains extension with invalid name (files).
Project 'web-auth-util' contains extension with invalid name (files).
Ran add-eslint-inputs from @nrwl/linter
Stop hashing eslint config files for build targets and dependent tasks

UPDATE nx.json

- Commit created for changes: 6852947b4baea8065775fa34a8976d11ce615bc8

---

> NX Running 'yarn' to make sure necessary packages are installed

[1/4] πŸ” Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] πŸ”— Linking dependencies...
warning " > @ngrx/[email protected]" has incorrect peer dependency "@angular/common@^14.0.0".
warning " > @ngrx/[email protected]" has incorrect peer dependency "@angular/core@^14.0.0".
warning " > @ngrx/[email protected]" has incorrect peer dependency "@angular/core@^14.0.0".
warning " > @ngrx/[email protected]" has incorrect peer dependency "@angular/core@^14.0.0".
warning " > @ngrx/[email protected]" has incorrect peer dependency "@angular/core@^14.0.0".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > [email protected]" has incorrect peer dependency "@angular/animations@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/common@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/forms@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/platform-browser@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/router@^11.0.4".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/core@^11.0.0 || ^12.0.0-0".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/common@^11.0.0 || ^12.0.0-0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/common@^11.0.5".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/core@^11.0.5".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/platform-browser@^11.0.0".
[4/4] πŸ”¨ Building fresh packages...
success Saved lockfile.
$ node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main && husky install

> NX Angular CLI has been decorated to enable computation caching.
  husky - Git hooks installed

> NX Successfully finished running migrations from 'migrations.json'. This workspace is up to date!

✨ Done in 174.19s.

3. nx migrate latest

See the full log of nx migrate latest 
nx migrate latest
Fetching meta data about packages.
It may take a few minutes.
Fetching [email protected]
Fetching @nrwl/[email protected]
Fetching @nrwl/[email protected]
Fetching @nrwl/[email protected]
Fetching @nrwl/[email protected]
Fetching @nrwl/[email protected]
Fetching @angular/[email protected]
Fetching @ngrx/[email protected]
Fetching @ngrx/[email protected]
Fetching @ngrx/[email protected]
Fetching @ngrx/[email protected]
Fetching @ngrx/[email protected]

> NX The migrate command has run successfully.

- package.json has been updated.
- migrations.json has been generated.

> NX Next steps:

- Make sure package.json changes make sense and then run 'yarn',
- Run 'yarn nx migrate --run-migrations'
- To learn more go to https://nx.dev/core-features/automate-updating-dependencies
yarn nx migrate --run-migrations --create-commits
yarn run v1.22.19
\$ nx migrate --run-migrations --create-commits

> NX Running 'yarn' to make sure necessary packages are installed

[1/4] πŸ” Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] πŸ”— Linking dependencies...
warning " > @nrwl/[email protected]" has unmet peer dependency "@angular-devkit/core@>= 14.0.0 < 16.0.0".
warning " > @nrwl/[email protected]" has unmet peer dependency "@angular-devkit/schematics@>= 14.0.0 < 16.0.0".
warning " > @nrwl/[email protected]" has unmet peer dependency "@schematics/angular@>= 14.0.0 < 16.0.0".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > [email protected]" has incorrect peer dependency "@angular/animations@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/common@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/forms@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/platform-browser@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/router@^11.0.4".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/core@^11.0.0 || ^12.0.0-0".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/common@^11.0.0 || ^12.0.0-0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/common@^11.0.5".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/core@^11.0.5".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/platform-browser@^11.0.0".
[4/4] πŸ”¨ Building fresh packages...
success Saved lockfile.
\$ node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main && husky install

> NX Decoration of the Angular CLI is deprecated and will be removed in a future version

Please replace usage of "ng <command>" in any scripts, particularly for CI, with "nx <command>"

> NX Angular CLI has been decorated to enable computation caching.
> husky - Git hooks installed
> Ran install-required-packages from @nrwl/angular
> Install the required angular-devkit packages as we do not directly depend on them anymore

UPDATE package.json

- Commit created for changes: 3c7ac4fed751545f2e56e2c4fee491e1864a4574

---

Ran update-angular-cli-version-15-1-0 from @nrwl/angular
Update the @angular/cli package version to ~15.1.0.

UPDATE package.json

- Commit created for changes: fe732dd4503ecf6f207fbb0f58dd304cd115d79e

---

Ran update-angular-cli-version-15-2-0 from @nrwl/angular
Update the @angular/cli package version to ~15.2.0.

UPDATE package.json

- Commit created for changes: b63ce242f43a39dbd5961495ff5f5d57a824a89c

---

Ran update-tsconfig-spec-jest from @nrwl/angular
Update the tsconfig.spec.json to use target es2016 for jest-preset-angular v13

UPDATE libs/web/shared/app-init/tsconfig.spec.json

- Commit created for changes: 6fe21b49efed5169578dc8494fc840a78d04d7f6

---

Ran add-eslint-ignore from @nrwl/linter
Add node_modules to root eslint ignore

CREATE .eslintignore

- Commit created for changes: a83d02d70a963e60aeed5de895c24cd1507b6d14

---

Ran ngrx-component-migration-15-beta from @ngrx/component
As of NgRx v14, `ReactiveComponentModule` is deprecated. It is replaced by `LetModule` and `PushModule`.

UPDATE libs/web/album/ui/album-track/src/lib/album-track.module.ts
UPDATE libs/web/artist/ui/artist-top-track/src/lib/artist-top-track.module.ts
UPDATE libs/web/browse/feature/category/src/lib/category.module.ts
UPDATE libs/web/playlist/feature/detail/src/lib/playlist.module.ts
UPDATE libs/web/playlist/ui/playlist-track/src/lib/playlist-track.module.ts
UPDATE libs/web/shared/ui/media/src/lib/media.module.ts
UPDATE libs/web/shared/ui/media-order/src/lib/media-order.module.ts
UPDATE libs/web/shared/ui/play-button/src/lib/play-button.module.ts
UPDATE libs/web/shell/ui/nav-bar-playlist/src/lib/nav-bar-playlist.module.ts
UPDATE libs/web/shell/ui/visualization-toggle/src/lib/visualization-toggle.module.ts
UPDATE libs/web/visualizer/ui/src/lib/web-visualizer-ui.module.ts

- Commit created for changes: dad2a2353699b1c76578cf9b220379b1df569b40

---

> NX Running 'yarn' to make sure necessary packages are installed

[1/4] πŸ” Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] πŸ”— Linking dependencies...
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/[email protected] || 11.x || 12.x".
warning " > [email protected]" has incorrect peer dependency "@angular/animations@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/common@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/forms@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/platform-browser@^11.0.4".
warning " > [email protected]" has incorrect peer dependency "@angular/router@^11.0.4".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/core@^11.0.0 || ^12.0.0-0".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/common@^11.0.0 || ^12.0.0-0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/common@^11.0.5".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/core@^11.0.5".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/platform-browser@^11.0.0".
[4/4] πŸ”¨ Building fresh packages...
success Saved lockfile.
\$ node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main && husky install

> NX Decoration of the Angular CLI is deprecated and will be removed in a future version

Please replace usage of "ng <command>" in any scripts, particularly for CI, with "nx <command>"

> NX Angular CLI has been decorated to enable computation caching.

husky - Git hooks installed

> NX Successfully finished running migrations from 'migrations.json'. This workspace is up to date!

All three steps above are done without any errors πŸŽ‰πŸŽ‰πŸŽ‰. I also tried to run the app with nx serve and it works fine.

Migrate from Angular 12 to 15 in Nx

Published 23 Apr 2023

    Read more

    Β β€”Β nx:run-commands output not colored
    Β β€”Β Prettier - prevent HTML closing tag > being placed on a new line?
    Β β€”Β zsh history not working after VSCode upgrade
    Β β€”Β The different between :focus and :focus-visible
    Β β€”Β Angular 13 upgrade - Error: Unknown keyword formatMinimum

    Follow @trungvose on Twitter for more!