Wanna see something cool? Check out Angular Spotify 🎧

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

To explore the exciting new features of Angular 17, I am migrating Angular Spotify to the latest version. One of the notable additions in Angular 17 is the View Transition API, which is now supported by Angular Router.

The View Transition API in Angular Router allows for seamless component activation and deactivation using the document.startViewTransition callback. This feature ensures smooth transitions when navigating between pages. Importantly, it gracefully handles browsers that do not support view transitions, providing a consistent navigation experience.

My current dependencies [email protected] and [email protected]

That’s how the current Angular Spotify dependencies looks like with [email protected] and [email protected]

{
  "name": "angular-spotify",
  "dependencies": {
    "@angular/animations": "15.2.8",
    "@angular/common": "15.2.8",
    "@angular/compiler": "15.2.8",
    "@angular/core": "15.2.8",
    "@angular/forms": "15.2.8",
    "@angular/platform-browser": "15.2.8",
    "@angular/platform-browser-dynamic": "15.2.8",
    "@angular/router": "15.2.8",
    "@angular/service-worker": "15.2.8"
  },
  "devDependencies": {
    "@nrwl/cli": "15.9.2",
    "@nrwl/cypress": "15.9.2",
    "@nrwl/eslint-plugin-nx": "15.9.2",
    "@nrwl/jest": "15.9.2",
    "@nrwl/js": "15.9.2",
    "@nrwl/linter": "15.9.2",
    "@nrwl/nx-cloud": "16.0.1",
    "@nrwl/workspace": "15.9.2"
  }
}

To ensure compatibility between Nx and Angular versions, it is recommended to use the latest version of Nx. Therefore, I will proceed with the command nx migrate latest to initiate the migration process.

As a reminder, the migration involves two steps:

Step 1. nx migrate latest

> yarn nx migrate latest                                                                                                     127 ✘  22:34:22 
yarn run v1.22.19
$ nx migrate latest
Fetching meta data about packages.
It may take a few minutes.
Fetching nx@18.1.2
Fetching @nrwl/js@18.1.2
Fetching @nrwl/eslint-plugin-nx@18.1.2
Fetching @nrwl/js@18.1.2
Fetching @nrwl/cypress@18.1.2
Fetching @nrwl/eslint-plugin-nx@18.1.2
Fetching @nrwl/linter@18.1.2
Fetching @nrwl/jest@18.1.2
Fetching @nrwl/workspace@18.1.2
Fetching @nrwl/angular@18.1.2
Fetching @nrwl/cypress@18.1.2
Fetching @nrwl/workspace@18.1.2
Fetching @nrwl/jest@18.1.2
Fetching @nrwl/linter@18.1.2
Fetching @nrwl/angular@18.1.2
Fetching @angular/core@17.2.4
Fetching @ngrx/store@17.0.1
Fetching @ngrx/effects@17.0.1
Fetching @ngrx/component-store@17.0.1
Fetching @ngrx/store-devtools@17.0.1
Fetching @ngrx/component@17.0.1

 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/features/automate-updating-dependencies

✨  Done in 73.63s.

As you can see, we need to upgrade to [email protected] and [email protected].

Although the changes in package.json look promising, they don’t actually perform the migration yet. The next step is where the real work begins.

Step 2. nx migrate —run-migrations

As the title suggest, I immediate run the next command so that it will actually do the migration

yarn nx migrate --run-migrations

Migrate from Angular 15 to 17 in Nx

After successfully running the migration command, I encountered an error when trying to serve the application again. As expected, jumping three major versions from [email protected] to [email protected] doesn’t work smoothly.

Proper migration strategy

To ensure a smooth upgrade process, it is recommended to follow a gradual rolling out approach when upgrading from Nx 15 to 18. Similar to the process described in Upgrading from Angular 12 to 15 in an Nx Workspace: A Comprehensive Guide, we should upgrade from Nx 15 to 16, then from 16 to 17, and finally from 17 to 18.

nx migrate 16.7.0 (support Angular 16.2.0)

Considering that I am currently using [email protected], I believe it is safe to upgrade directly to [email protected].

See the full log of yarn nx migrate 16.7.0

> yarn nx migrate 16.7.0  ✔ 22:55:12
yarn run v1.22.19
$ nx migrate 16.7.0
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 @nrwl/[email protected]
Fetching @nrwl/[email protected]
Fetching @nrwl/[email protected]
Fetching @nrwl/[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/features/automate-updating-dependencies

✨  Done in 60.02s.

> yarn nx migrate --run-migrations  ✔ 22:57:26
yarn run v1.22.19
$ nx migrate --run-migrations

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

[1/4] 🔍  Resolving packages...
warning @angular-devkit/build-angular > guess-parser > @wessberg/[email protected]: this package has been renamed to ts-evaluator. Please install ts-evaluator instead
warning @angular-devkit/build-angular > guess-parser > @wessberg/ts-evaluator > jsdom > [email protected]: Use your platform's native DOMException instead
warning @angular-devkit/build-angular > guess-parser > @wessberg/ts-evaluator > jsdom > [email protected]: Use your platform's native performance.now() and performance.timeOrigin.
warning @angular-devkit/build-angular > guess-parser > @wessberg/ts-evaluator > jsdom > data-urls > [email protected]: Use your platform's native atob() and btoa() methods instead
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@nrwl/angular > @nx/[email protected]" has unmet peer dependency "esbuild@^0.17.5".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/common@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/core@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/router@>= 10.x <= 15.x".
warning " > [email protected]" has incorrect peer dependency "@angular/animations@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/common@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/forms@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/platform-browser@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/router@^15.0.1".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/common@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/core@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/platform-browser@^15.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.

==========================================

ALERT: As of Angular 16, "ngcc" is no longer required and not invoked during CLI builds. You are seeing this message because the current operation invoked the "ngcc" command directly. This "ngcc" invocation can be safely removed.

A common reason for this is invoking "ngcc" from a "postinstall" hook in package.json.

In Angular 17, this command will be removed. Remove this and any other invocations to prevent errors in later versions.

==========================================

husky - Git hooks installed
$ nx migrate --run-migrations
$ nx _migrate --run-migrations

 >  NX   Running migrations from 'migrations.json'

Ran 16.0.0-remove-nrwl-cli from nx
  Remove @nrwl/cli.

  UPDATE package.json
---------------------------------------------------------
Ran 16.0.0-update-nx-cloud-runner from nx
  Replace @nrwl/nx-cloud with nx-cloud

  UPDATE package.json
  UPDATE nx.json
---------------------------------------------------------
Ran 16.6.0-prefix-outputs from nx
  Prefix outputs with {workspaceRoot}/{projectRoot} if needed

  UPDATE apps/angular-spotify/project.json
  UPDATE libs/web/playlist/feature/list/project.json
  UPDATE libs/web/playlist/data-access/project.json
  UPDATE libs/web/playlist/feature/detail/project.json
  UPDATE libs/web/visualizer/feature/project.json
  UPDATE libs/web/visualizer/data-access/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/search/feature/project.json
  UPDATE libs/web/search/data-access/project.json
  UPDATE libs/web/artist/ui/artist-top-tracks/project.json
  UPDATE libs/web/artist/ui/artist-top-track/project.json
  UPDATE libs/web/browse/data-access/project.json
  UPDATE libs/web/shared/ui/track-current-info/project.json
  UPDATE libs/web/shared/ui/icon/project.json
  UPDATE libs/web/shared/directives/click-stop-propagation/project.json
  UPDATE libs/web/shared/ui/media/project.json
  UPDATE libs/web/shared/ui/playlist-list/project.json
  UPDATE libs/web/shared/ui/spinner/project.json
  UPDATE libs/web/shared/ui/play-button/project.json
  UPDATE libs/web/shared/ui/tracks-loading/project.json
  UPDATE libs/web/shared/ui/media-order/project.json
  UPDATE libs/web/shared/ui/track-main-info/project.json
  UPDATE libs/web/shared/ui/input/project.json
  UPDATE libs/web/shared/ui/media-summary/project.json
  UPDATE libs/web/shared/ui/media-cover/project.json
  UPDATE libs/web/shared/ui/work-in-progress/project.json
  UPDATE libs/web/shared/ui/media-table/project.json
  UPDATE libs/web/shared/utils/project.json
  UPDATE libs/web/shared/app-config/project.json
  UPDATE libs/web/shared/assets/project.json
  UPDATE libs/web/artist/feature/project.json
  UPDATE libs/web/artist/data-access/project.json
  UPDATE libs/web/shared/pipes/duration-pipe/project.json
  UPDATE libs/web/visualizer/ui/project.json
  UPDATE libs/web/album/ui/album-track/project.json
  UPDATE libs/web/album/feature/detail/project.json
  UPDATE libs/web/album/feature/shell/project.json
  UPDATE libs/web/album/feature/list/project.json
  UPDATE libs/web/browse/feature/categories/project.json
  UPDATE libs/web/browse/feature/shell/project.json
  UPDATE libs/web/browse/feature/category/project.json
  UPDATE libs/web/browse/ui/category-cover/project.json
  UPDATE libs/web/album/data-access/project.json
  UPDATE libs/web/playlist/ui/playlist-track/project.json
  UPDATE libs/web/shell/ui/album-art-overlay/project.json
  UPDATE libs/web/shell/ui/player-controls/project.json
  UPDATE libs/web/shell/ui/main-view/project.json
  UPDATE libs/web/shell/ui/player-playback/project.json
  UPDATE libs/web/shell/ui/player-volume/project.json
  UPDATE libs/web/settings/data-access/project.json
  UPDATE libs/web/shell/ui/now-playing-bar/project.json
  UPDATE libs/web/shell/ui/nav-bar/project.json
  UPDATE libs/web/shell/ui/nav-links/project.json
  UPDATE libs/web/shell/ui/top-bar/project.json
  UPDATE libs/web/shell/ui/visualization-toggle/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/home/data-access/project.json
  UPDATE libs/web/shell/ui/layout/project.json
  UPDATE libs/web/tracks/data-access/project.json
  UPDATE libs/web/shell/ui/social-share/project.json
  UPDATE libs/web/shell/ui/user-dropdown/project.json
  UPDATE libs/web/shell/feature/project.json
  UPDATE libs/web/tracks/feature/project.json
  UPDATE libs/web/auth/util/project.json
  UPDATE libs/web/home/feature/project.json
  UPDATE libs/web/auth/ui/unauthorized-modal/project.json
  UPDATE libs/web/settings/feature/project.json
  UPDATE libs/web/auth/data-access/project.json
---------------------------------------------------------
Ran update-16-0-0-add-nx-packages from @nrwl/workspace
  Replace @nrwl/workspace with @nx/workspace

  UPDATE package.json
  UPDATE .nx/cache/file-map.json
  UPDATE .nx/cache/parsed-lock-file.json
  UPDATE .nx/cache/project-graph.json
  UPDATE decorate-angular-cli.js
  UPDATE migrations.json
---------------------------------------------------------
Ran 16-0-0-move-workspace-generators-into-local-plugin from @nrwl/workspace
  Generates a plugin called 'workspace-plugin' containing your workspace generators.

  DELETE tools/generators
---------------------------------------------------------
Ran 16-0-0-fix-invalid-babelrc from @nrwl/workspace
  Fix .babelrc presets if it contains an invalid entry for @nx/web/babel.

  UPDATE libs/web/browse/data-access/.babelrc
  UPDATE libs/web/album/data-access/.babelrc
  UPDATE libs/web/tracks/data-access/.babelrc
  UPDATE libs/web/search/data-access/.babelrc
  UPDATE libs/web/settings/data-access/.babelrc
  UPDATE libs/web/home/data-access/.babelrc
---------------------------------------------------------
Ran update-16-0-0-add-nx-packages from @nrwl/eslint-plugin-nx
  Replace @nrwl/eslint-plugin-nx with @nx/eslint-plugin

  UPDATE package.json
  UPDATE .nx/cache/file-map.json
  UPDATE .nx/cache/parsed-lock-file.json
  UPDATE .nx/cache/project-graph.json
  UPDATE migrations.json
  UPDATE .eslintrc.json
  UPDATE apps/angular-spotify/.eslintrc.json
  UPDATE libs/web/album/feature/detail/.eslintrc.json
  UPDATE libs/web/album/feature/list/.eslintrc.json
  UPDATE libs/web/album/feature/shell/.eslintrc.json
  UPDATE libs/web/album/ui/album-track/.eslintrc.json
  UPDATE libs/web/artist/data-access/.eslintrc.json
  UPDATE libs/web/artist/feature/.eslintrc.json
  UPDATE libs/web/artist/ui/artist-top-track/.eslintrc.json
  UPDATE libs/web/artist/ui/artist-top-tracks/.eslintrc.json
  UPDATE libs/web/auth/ui/unauthorized-modal/.eslintrc.json
  UPDATE libs/web/browse/feature/categories/.eslintrc.json
  UPDATE libs/web/browse/feature/category/.eslintrc.json
  UPDATE libs/web/browse/feature/shell/.eslintrc.json
  UPDATE libs/web/browse/ui/category-cover/.eslintrc.json
  UPDATE libs/web/container-queries/.eslintrc.json
  UPDATE libs/web/future-responsive/.eslintrc.json
  UPDATE libs/web/home/feature/.eslintrc.json
  UPDATE libs/web/home/ui/featured-playlists/.eslintrc.json
  UPDATE libs/web/home/ui/greeting/.eslintrc.json
  UPDATE libs/web/home/ui/recent-played/.eslintrc.json
  UPDATE libs/web/playlist/feature/detail/.eslintrc.json
  UPDATE libs/web/playlist/feature/list/.eslintrc.json
  UPDATE libs/web/playlist/ui/playlist-track/.eslintrc.json
  UPDATE libs/web/search/feature/.eslintrc.json
  UPDATE libs/web/settings/feature/.eslintrc.json
  UPDATE libs/web/shared/app-init/.eslintrc.json
  UPDATE libs/web/shared/directives/click-stop-propagation/.eslintrc.json
  UPDATE libs/web/shared/directives/data-size-observer/.eslintrc.json
  UPDATE libs/web/shared/pipes/duration-pipe/.eslintrc.json
  UPDATE libs/web/shared/ui/icon/.eslintrc.json
  UPDATE libs/web/shared/ui/input/.eslintrc.json
  UPDATE libs/web/shared/ui/media/.eslintrc.json
  UPDATE libs/web/shared/ui/media-cover/.eslintrc.json
  UPDATE libs/web/shared/ui/media-order/.eslintrc.json
  UPDATE libs/web/shared/ui/media-summary/.eslintrc.json
  UPDATE libs/web/shared/ui/media-table/.eslintrc.json
  UPDATE libs/web/shared/ui/play-button/.eslintrc.json
  UPDATE libs/web/shared/ui/playlist-list/.eslintrc.json
  UPDATE libs/web/shared/ui/spinner/.eslintrc.json
  UPDATE libs/web/shared/ui/track-current-info/.eslintrc.json
  UPDATE libs/web/shared/ui/track-main-info/.eslintrc.json
  UPDATE libs/web/shared/ui/tracks-loading/.eslintrc.json
  UPDATE libs/web/shared/ui/work-in-progress/.eslintrc.json
  UPDATE libs/web/shell/feature/.eslintrc.json
  UPDATE libs/web/shell/ui/album-art-overlay/.eslintrc.json
  UPDATE libs/web/shell/ui/layout/.eslintrc.json
  UPDATE libs/web/shell/ui/main-view/.eslintrc.json
  UPDATE libs/web/shell/ui/nav-bar/.eslintrc.json
  UPDATE libs/web/shell/ui/nav-links/.eslintrc.json
  UPDATE libs/web/shell/ui/now-playing-bar/.eslintrc.json
  UPDATE libs/web/shell/ui/player-controls/.eslintrc.json
  UPDATE libs/web/shell/ui/player-playback/.eslintrc.json
  UPDATE libs/web/shell/ui/player-volume/.eslintrc.json
  UPDATE libs/web/shell/ui/social-share/.eslintrc.json
  UPDATE libs/web/shell/ui/top-bar/.eslintrc.json
  UPDATE libs/web/shell/ui/user-dropdown/.eslintrc.json
  UPDATE libs/web/shell/ui/visualization-toggle/.eslintrc.json
  UPDATE libs/web/tracks/feature/.eslintrc.json
  UPDATE libs/web/visualizer/feature/.eslintrc.json
  UPDATE libs/web/visualizer/ui/.eslintrc.json
---------------------------------------------------------
Ran update-16-0-0-add-nx-packages from @nrwl/cypress
  Replace @nrwl/cypress with @nx/cypress

  UPDATE package.json
  UPDATE .nx/cache/file-map.json
  UPDATE .nx/cache/parsed-lock-file.json
  UPDATE .nx/cache/project-graph.json
  UPDATE migrations.json
---------------------------------------------------------
Ran update-16-0-0-add-nx-packages from @nrwl/linter
  Replace @nrwl/linter with @nx/linter

  UPDATE package.json
  UPDATE apps/angular-spotify/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/data-access/models/project.json
  UPDATE libs/web/search/data-access/project.json
  UPDATE libs/web/browse/data-access/project.json
  UPDATE libs/web/album/data-access/project.json
  UPDATE libs/web/artist/data-access/project.json
  UPDATE libs/web/visualizer/data-access/project.json
  UPDATE libs/web/shared/pipes/duration-pipe/project.json
  UPDATE libs/web/shared/utils/project.json
  UPDATE libs/web/shared/app-init/project.json
  UPDATE libs/web/shared/app-config/project.json
  UPDATE libs/web/container-queries/project.json
  UPDATE libs/web/shared/ui/track-current-info/project.json
  UPDATE libs/web/shared/directives/click-stop-propagation/project.json
  UPDATE libs/web/shared/ui/icon/project.json
  UPDATE libs/web/shared/ui/media/project.json
  UPDATE libs/web/browse/feature/category/project.json
  UPDATE libs/web/browse/feature/shell/project.json
  UPDATE libs/web/browse/feature/categories/project.json
  UPDATE libs/web/shared/directives/data-size-observer/project.json
  UPDATE libs/web/search/feature/project.json
  UPDATE libs/web/shared/ui/playlist-list/project.json
  UPDATE libs/web/shared/ui/play-button/project.json
  UPDATE libs/web/shared/ui/track-main-info/project.json
  UPDATE libs/web/shared/ui/spinner/project.json
  UPDATE libs/web/shared/ui/media-order/project.json
  UPDATE libs/web/shared/ui/tracks-loading/project.json
  UPDATE libs/web/browse/ui/category-cover/project.json
  UPDATE libs/web/shared/ui/media-cover/project.json
  UPDATE libs/web/shared/ui/media-table/project.json
  UPDATE libs/web/shared/ui/input/project.json
  UPDATE libs/web/shared/ui/media-summary/project.json
  UPDATE libs/web/shared/ui/work-in-progress/project.json
  UPDATE libs/web/future-responsive/project.json
  UPDATE libs/web/artist/ui/artist-top-track/project.json
  UPDATE libs/web/visualizer/feature/project.json
  UPDATE libs/web/visualizer/ui/project.json
  UPDATE libs/web/album/feature/shell/project.json
  UPDATE libs/web/album/ui/album-track/project.json
  UPDATE libs/web/album/feature/list/project.json
  UPDATE libs/web/album/feature/detail/project.json
  UPDATE libs/web/artist/feature/project.json
  UPDATE libs/web/playlist/data-access/project.json
  UPDATE libs/web/playlist/feature/list/project.json
  UPDATE libs/web/settings/data-access/project.json
  UPDATE libs/web/playlist/feature/detail/project.json
  UPDATE libs/web/shell/ui/top-bar/project.json
  UPDATE libs/web/shell/ui/album-art-overlay/project.json
  UPDATE libs/web/shell/ui/player-controls/project.json
  UPDATE libs/web/shell/ui/player-playback/project.json
  UPDATE libs/web/auth/ui/unauthorized-modal/project.json
  UPDATE libs/web/shell/ui/layout/project.json
  UPDATE libs/web/shell/ui/now-playing-bar/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/visualization-toggle/project.json
  UPDATE libs/web/shell/ui/nav-links/project.json
  UPDATE libs/web/shell/ui/social-share/project.json
  UPDATE libs/web/shell/ui/player-volume/project.json
  UPDATE libs/web/shell/ui/user-dropdown/project.json
  UPDATE libs/web/auth/data-access/project.json
  UPDATE libs/web/shell/feature/project.json
  UPDATE libs/web/auth/util/project.json
  UPDATE libs/web/settings/feature/project.json
  UPDATE libs/web/artist/ui/artist-top-tracks/project.json
  UPDATE libs/web/home/ui/greeting/project.json
  UPDATE libs/web/home/ui/recent-played/project.json
  UPDATE libs/web/playlist/ui/playlist-track/project.json
  UPDATE libs/web/tracks/data-access/project.json
  UPDATE libs/web/tracks/feature/project.json
  UPDATE libs/web/home/ui/featured-playlists/project.json
  UPDATE libs/web/home/feature/project.json
  UPDATE libs/web/home/data-access/project.json
  UPDATE .nx/cache/file-map.json
  UPDATE .nx/cache/parsed-lock-file.json
  UPDATE .nx/cache/project-graph.json
  UPDATE migrations.json
---------------------------------------------------------
Ran update-16-0-0-add-nx-packages from @nrwl/js
  Replace @nrwl/js with @nx/js

  UPDATE package.json
  UPDATE .nx/cache/file-map.json
  UPDATE .nx/cache/parsed-lock-file.json
  UPDATE .nx/cache/project-graph.json
  UPDATE migrations.json
---------------------------------------------------------
Ran update-16-0-0-add-nx-packages from @nrwl/jest
  Replace @nrwl/jest with @nx/jest

  UPDATE package.json
  UPDATE apps/angular-spotify/project.json
  UPDATE libs/web/visualizer/data-access/project.json
  UPDATE libs/web/future-responsive/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/browse/data-access/project.json
  UPDATE libs/web/album/feature/detail/project.json
  UPDATE libs/web/album/feature/shell/project.json
  UPDATE libs/web/album/feature/list/project.json
  UPDATE libs/web/browse/ui/category-cover/project.json
  UPDATE libs/web/browse/feature/shell/project.json
  UPDATE libs/web/browse/feature/category/project.json
  UPDATE libs/web/browse/feature/categories/project.json
  UPDATE libs/web/visualizer/ui/project.json
  UPDATE libs/web/visualizer/feature/project.json
  UPDATE libs/web/tracks/feature/project.json
  UPDATE libs/web/tracks/data-access/project.json
  UPDATE libs/web/search/data-access/project.json
  UPDATE libs/web/container-queries/project.json
  UPDATE libs/web/artist/ui/artist-top-tracks/project.json
  UPDATE libs/web/shared/pipes/duration-pipe/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/app-init/project.json
  UPDATE libs/web/shared/app-config/project.json
  UPDATE libs/web/artist/ui/artist-top-track/project.json
  UPDATE libs/web/shared/ui/tracks-loading/project.json
  UPDATE libs/web/shared/ui/media-order/project.json
  UPDATE libs/web/shared/ui/icon/project.json
  UPDATE libs/web/shared/ui/media-table/project.json
  UPDATE libs/web/shared/ui/spinner/project.json
  UPDATE libs/web/shared/ui/playlist-list/project.json
  UPDATE libs/web/search/feature/project.json
  UPDATE libs/web/shared/directives/data-size-observer/project.json
  UPDATE libs/web/shared/ui/work-in-progress/project.json
  UPDATE libs/web/shared/ui/input/project.json
  UPDATE libs/web/album/ui/album-track/project.json
  UPDATE libs/web/shared/utils/project.json
  UPDATE libs/web/settings/feature/project.json
  UPDATE libs/web/settings/data-access/project.json
  UPDATE libs/web/home/data-access/project.json
  UPDATE libs/web/auth/util/project.json
  UPDATE libs/web/auth/data-access/project.json
  UPDATE libs/web/auth/ui/unauthorized-modal/project.json
  UPDATE libs/web/home/ui/recent-played/project.json
  UPDATE libs/web/playlist/ui/playlist-track/project.json
  UPDATE libs/web/shell/ui/visualization-toggle/project.json
  UPDATE libs/web/shell/ui/top-bar/project.json
  UPDATE libs/web/shell/ui/nav-bar/project.json
  UPDATE libs/web/shell/ui/nav-links/project.json
  UPDATE libs/web/shell/ui/album-art-overlay/project.json
  UPDATE libs/web/shell/ui/social-share/project.json
  UPDATE libs/web/shell/ui/user-dropdown/project.json
  UPDATE libs/web/shell/ui/layout/project.json
  UPDATE libs/web/shell/ui/main-view/project.json
  UPDATE libs/web/shell/feature/project.json
  UPDATE libs/web/home/feature/project.json
  UPDATE libs/web/playlist/data-access/project.json
  UPDATE libs/web/home/ui/featured-playlists/project.json
  UPDATE libs/web/home/ui/greeting/project.json
  UPDATE .nx/cache/file-map.json
  UPDATE .nx/cache/parsed-lock-file.json
  UPDATE .nx/cache/project-graph.json
  UPDATE jest.config.ts
  UPDATE jest.preset.js
  UPDATE migrations.json
---------------------------------------------------------
Ran add-test-setup-to-inputs-ignore from @nrwl/jest
  Add test-setup.ts to ignored files in production input

  UPDATE nx.json
---------------------------------------------------------
Ran update-16-0-0-add-nx-packages from @nrwl/angular
  Replace @nrwl/angular with @nx/angular

  UPDATE package.json
  UPDATE nx.json
  UPDATE .nx/cache/file-map.json
  UPDATE .nx/cache/parsed-lock-file.json
  UPDATE .nx/cache/project-graph.json
  UPDATE migrations.json
---------------------------------------------------------
Ran remove-ngcc-invocation from @nrwl/angular
  Remove 'ngcc' invocation if exists from the 'postinstall' script in package.json.

  UPDATE package.json
---------------------------------------------------------
Ran update-angular-cli-version-16-0-0 from @nrwl/angular
  Update the @angular/cli package version to ~16.0.0.

  UPDATE package.json
---------------------------------------------------------
Ran update-angular-cli-version-16-1-0 from @nrwl/angular
  Update the @angular/cli package version to ~16.1.0.

  UPDATE package.json
---------------------------------------------------------
Ran update-angular-cli-version-16-2-0 from @nrwl/angular
  Update the @angular/cli package version to ~16.2.0.

  UPDATE package.json
---------------------------------------------------------
Ran ngrx-component-migration-16 from @ngrx/component
  As of NgRx v16, `LetModule` and `PushModule` are deprecated in favor of standalone `LetDirective` and `PushPipe`.

  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/card.component.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-links/src/lib/nav-links.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
---------------------------------------------------------

 >  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/common@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/core@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/router@>= 10.x <= 15.x".
warning " > [email protected]" has incorrect peer dependency "@angular/animations@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/common@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/forms@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/platform-browser@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/router@^15.0.1".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/common@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/core@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/platform-browser@^15.0.0".
warning " > @nx/[email protected]" has unmet peer dependency "esbuild@^0.17.5".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
$ node ./decorate-angular-cli.js && husky install

 >  NX   Decoration of the Angular CLI did not complete successfully

husky - Git hooks installed

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

✨  Done in 117.18s.

It is crucial to run the serve or build command after every nx migrate --run-migrations to ensure that the application is functioning correctly. While having CI/CD configured can help catch issues when pushing code, it is always recommended to manually verify the code’s functionality before pushing.

I encountered an issue when running yarn serve.

Error: libs/web/shell/ui/visualization-toggle/src/lib/visualization-toggle.module.ts:16:5 - error NG6002: 'SvgIconsModule' does not appear to be an NgModule class.

16     SvgIconsModule
       ~~~~~~~~~~~~~~

  node_modules/@ngneat/svg-icon/lib/svg-icons.module.d.ts:4:22
    4 export declare class SvgIconsModule {
                           ~~~~~~~~~~~~~~
    This likely means that the library (@ngneat/svg-icon) which declares SvgIconsModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

It turns out that the version of @ngneat/svg-icon I was using, 3.2.0, is too old. I found the latest version on GitHub, which is v7.0.3. To avoid any potential issues, I will commit the current Nx upgrade changes before upgrading @ngneat/svg-icon. This way, I can easily rollback if anything goes wrong.

yarn add @ngneat/svg-icon
yarn add @ngneat/svg-generator --save-dev

However, after performing the migration, I encountered another error when running yarn serve.

Error: libs/web/visualizer/ui/src/lib/web-visualizer-ui.component.html:11:15 - error NG8002: Can't bind to 'key' since it isn't a known property of 'svg-icon'.
1. If 'svg-icon' is an Angular component and it has 'key' input, then verify that it is part of this module.
2. If 'svg-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

11     <svg-icon [key]="'times'"></svg-icon>
                 ~~~~~~~~~~~~~~~

  libs/web/visualizer/ui/src/lib/web-visualizer-ui.component.ts:28:16
    28   templateUrl: './web-visualizer-ui.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component WebVisualizerUiComponent.

Error: libs/web/visualizer/ui/src/lib/web-visualizer-ui.module.ts:3:10 - error TS2305: Module '"@ngneat/svg-icon"' has no exported member 'SvgIconsModule'.

3 import { SvgIconsModule } from '@ngneat/svg-icon';
           ~~~~~~~~~~~~~~

Error: libs/web/visualizer/ui/src/lib/web-visualizer-ui.module.ts:8:12 - error NG1010: Value

I noticed that in Angular, components are now exported as standalone components. According to the documentation, SvgIconsModule has been replaced with SvgIconComponent, and SvgIconsModule.forRoot is now replaced with provideSvgIcons.

To update my code, I performed a global search and replace, replacing SvgIconsModule with SvgIconComponent. However, this resulted in a few TypeScript errors related to generics. I will fix these errors, but before that, I want to commit the current changes.

Type ‘string’ is not assignable to type ‘GenericStoreStatus’

Now TypeScript is reporting a new error. The problem is that the GenericStoreStatus type only allows four specific string values.

export type GenericStoreStatus = 'pending' | 'loading' | 'success' | 'error'

In the reducer function, when I only return a new object with status: 'loading', TypeScript implicitly assumes that the type of status is string. To explicitly specify that status should have the type GenericStoreStatus, I need to provide a type annotation or use a type assertion.

export const albumsReducer = createReducer(
  initialState,
  on(loadAlbums, (state) => ({
    ...state,
    status: 'loading',
    error: null
  })),

To resolve this issue, you can cast the status value to GenericStoreStatus using 'loading' as GenericStoreStatus. Alternatively, you can use the as const assertion to ensure the status value is treated as a specific string literal type.

export const albumsReducer = createReducer(
  initialState,
  on(loadAlbums, (state) => ({
    ...state,
-    status: 'loading',
+    status: 'loading' as GenericStoreStatus,
     // OR
+    status: 'loading' as const,
    error: null
  })),

To fix the issue, you can use multi-cursor editing. Here’s a gif demonstrating the process:

Migrate from Angular 15 to 17 in Nx

Running nx serve again and it is working now.

nx migrate 17.3.0 (support Angular 17.1.0)

I ran two commands

yarn nx migrate 17.3.0
yarn nx migrate --run-migrations

See the full log of nx migrate 17.3.0

> yarn nx migrate 17.3.0                                    ✔ 16:20:23
yarn run v1.22.19
$ nx migrate 17.3.0
Fetching meta data about packages.
It may take a few minutes.
Fetching [email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @nx/[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/features/automate-updating-dependencies

✨  Done in 45.81s.

yarn nx migrate --run-migrations                ✔  40s   16:27:51 
yarn run v1.22.19
$ nx migrate --run-migrations

 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/common@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/core@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/router@>= 10.x <= 15.x".
warning " > [email protected]" has incorrect peer dependency "@angular/animations@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/common@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/forms@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/platform-browser@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/router@^15.0.1".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/core@^15.0.0 || ^16.0.0".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/common@^15.0.0 || ^16.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/common@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/core@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/platform-browser@^15.0.0".
warning " > @ngneat/[email protected]" has unmet peer dependency "svgo@>=3.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
$ node ./decorate-angular-cli.js && husky install

 >  NX   Decoration of the Angular CLI did not complete successfully

husky - Git hooks installed
$ nx migrate --run-migrations
$ nx _migrate --run-migrations

 >  NX   Running migrations from 'migrations.json'

Ran 17.0.0-move-cache-directory from nx
  Updates the default cache directory to .nx/cache

  UPDATE .prettierignore
---------------------------------------------------------
Ran 17.0.0-use-minimal-config-for-tasks-runner-options from nx
  Use minimal config for tasksRunnerOptions

  UPDATE package.json
  UPDATE nx.json
---------------------------------------------------------
[object Object]
Ran rm-default-collection-npm-scope from nx
  Migration for v17.0.0-rc.1

  UPDATE nx.json
---------------------------------------------------------
Ran update-angular-cli-version-17-0-0 from @nx/angular
  Update the @angular/cli package version to ~17.0.0.

  UPDATE package.json
---------------------------------------------------------
Ran rename-browser-target-to-build-target from @nx/angular
  Rename 'browserTarget' to 'buildTarget'.

  UPDATE apps/angular-spotify/project.json
---------------------------------------------------------
Ran update-angular-cli-version-17-1-0 from @nx/angular
  Update the @angular/cli package version to ~17.1.0.

  UPDATE package.json
---------------------------------------------------------
Ran move-options-to-target-defaults from @nx/jest
  Move jest executor options to nx.json targetDefaults

  UPDATE nx.json
  UPDATE apps/angular-spotify/project.json
  UPDATE libs/web/album/data-access/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/data-access/project.json
  UPDATE libs/web/artist/feature/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/data-access/project.json
  UPDATE libs/web/auth/ui/unauthorized-modal/project.json
  UPDATE libs/web/auth/util/project.json
  UPDATE libs/web/browse/data-access/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/container-queries/project.json
  UPDATE libs/web/future-responsive/project.json
  UPDATE libs/web/home/data-access/project.json
  UPDATE libs/web/home/feature/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/data-access/project.json
  UPDATE libs/web/playlist/ui/playlist-track/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/app-init/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/data-size-observer/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-order/project.json
  UPDATE libs/web/shared/ui/media-table/project.json
  UPDATE libs/web/shared/ui/playlist-list/project.json
  UPDATE libs/web/shared/ui/spinner/project.json
  UPDATE libs/web/shared/ui/tracks-loading/project.json
  UPDATE libs/web/shared/ui/work-in-progress/project.json
  UPDATE libs/web/shared/utils/project.json
  UPDATE libs/web/shell/feature/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-links/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
  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
---------------------------------------------------------
Ran update-17-0-0-rename-to-eslint from @nx/linter
  update-17-0-0-rename-to-eslint

  UPDATE package.json
  UPDATE apps/angular-spotify/project.json
  UPDATE libs/web/album/data-access/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/data-access/project.json
  UPDATE libs/web/artist/feature/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/data-access/project.json
  UPDATE libs/web/auth/ui/unauthorized-modal/project.json
  UPDATE libs/web/auth/util/project.json
  UPDATE libs/web/browse/data-access/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/container-queries/project.json
  UPDATE libs/web/future-responsive/project.json
  UPDATE libs/web/home/data-access/project.json
  UPDATE libs/web/home/feature/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/data-access/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/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/app-init/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/directives/data-size-observer/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/shared/utils/project.json
  UPDATE libs/web/shell/feature/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-links/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
  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 migrations.json
---------------------------------------------------------
Ran simplify-eslint-patterns from @nx/linter
  Simplify eslintFilePatterns

  UPDATE apps/angular-spotify/project.json
  UPDATE libs/web/album/data-access/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/data-access/project.json
  UPDATE libs/web/artist/feature/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/data-access/project.json
  UPDATE libs/web/auth/ui/unauthorized-modal/project.json
  UPDATE libs/web/auth/util/project.json
  UPDATE libs/web/browse/data-access/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/container-queries/project.json
  UPDATE libs/web/future-responsive/project.json
  UPDATE libs/web/home/data-access/project.json
  UPDATE libs/web/home/feature/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/data-access/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/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/app-init/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/directives/data-size-observer/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/shared/utils/project.json
  UPDATE libs/web/shell/feature/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-links/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
  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
---------------------------------------------------------
Ran move-options-to-target-defaults from @nx/linter
  Move executor options to target defaults

  UPDATE nx.json
---------------------------------------------------------
Ran block-template-entities from @angular/core
  Angular v17 introduces a new control flow syntax that uses the @ and } characters. This migration replaces the existing usages with their corresponding HTML entities.

  UPDATE libs/web/shared/ui/work-in-progress/src/lib/work-in-progress.component.html
---------------------------------------------------------
Ran ngrx-store-devtools-migration-17-0-0-beta from @ngrx/store-devtools
  The road to v17-beta.1

  UPDATE libs/web/shell/feature/src/lib/build-specifics/index.ts
---------------------------------------------------------

 >  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/common@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/core@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/router@>= 10.x <= 15.x".
warning " > [email protected]" has incorrect peer dependency "@angular/animations@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/common@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/forms@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/platform-browser@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/router@^15.0.1".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/core@^15.0.0 || ^16.0.0".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/common@^15.0.0 || ^16.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/common@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/core@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/platform-browser@^15.0.0".
warning " > @ngneat/[email protected]" has unmet peer dependency "svgo@>=3.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
$ node ./decorate-angular-cli.js && husky install

 >  NX   Decoration of the Angular CLI did not complete successfully

husky - Git hooks installed

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

I encountered an issue while running nx serve this time. The problem is in the promp-update.service.ts file where the UpdateAvailableEvent has been removed. To resolve this, I followed the instructions provided in the Updating to the latest version guide to force update the service worker.

Error: libs/web/shared/app-init/src/lib/promp-update.service.ts:3:20 - error TS2305: Module '"@angular/service-worker"' has no exported member 'UpdateAvailableEvent'.

3 import { SwUpdate, UpdateAvailableEvent } from '@angular/service-worker';
                     ~~~~~~~~~~~~~~~~~~~~

Error: libs/web/shared/app-init/src/lib/promp-update.service.ts:17:25 - error TS2339: Property 'available' does not exist on type 'SwUpdate'.

17     return this.updates.available.pipe(
                           ~~~~~~~~~

Error: libs/web/shared/app-init/src/lib/promp-update.service.ts:21:55 - error TS18046: 'version' is of type 'unknown'.

21             `[Angular Spotify] PWA is updating from ${version.current.hash} to ${version.available.hash}...`
                                                         ~~~~~~~

Error: libs/web/shared/app-init/src/lib/promp-update.service.ts:21:82 - error TS18046: 'version' is of type 'unknown'.

21             `[Angular Spotify] PWA is updating from ${version.current.hash} to ${version.available.hash}...`

Here is the updated code:

forceUpdate(): Observable<VersionEvent | null> {
  if (!this.updates.isEnabled) {
    return of(null);
  }
  return this.updates.versionUpdates.pipe(
    filter((evt) => evt.type === 'VERSION_READY'),
    tap(() => {
      this.updates.activateUpdate().then(() => {
        if (
          confirm(
            `There is a new version of Angular Spotify available! Would you like to upgrade now?`
          )
        ) {
          this.document.location.reload();
        }
      });
    })
  );
}

Running nx serve again and it is working now.

nx migrate 18.2.0 (support Angular 17.3.0)

This should be the easiest one as it is just a minor update.

yarn nx migrate 18.2.0
yarn nx migrate --run-migrations

See the full log of nx migrate 18.2.0

> yarn nx migrate 18.2.0                          ✔  16:48:04
yarn run v1.22.19
$ nx migrate 18.2.0
Fetching meta data about packages.
It may take a few minutes.
Fetching [email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]
Fetching @angular/[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/features/automate-updating-dependencies

✨  Done in 15.74s.

> yarn nx migrate --run-migrations               ✔ 16:49:19
yarn run v1.22.19
$ nx migrate --run-migrations

 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/common@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/core@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/router@>= 10.x <= 15.x".
warning " > [email protected]" has incorrect peer dependency "@angular/animations@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/common@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/forms@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/platform-browser@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/router@^15.0.1".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/core@^15.0.0 || ^16.0.0".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/common@^15.0.0 || ^16.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/common@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/core@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/platform-browser@^15.0.0".
warning " > @ngneat/[email protected]" has unmet peer dependency "svgo@>=3.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
$ node ./decorate-angular-cli.js && husky install

 NX   Decoration of the Angular CLI did not complete successfully

husky - Git hooks installed
$ nx migrate --run-migrations
$ nx _migrate --run-migrations

 NX   Running migrations from 'migrations.json'

Ran 18.0.0-disable-adding-plugins-for-existing-workspaces from nx
  Updates nx.json to disabled adding plugins when generating projects in an existing Nx workspace

  UPDATE nx.json
---------------------------------------------------------
Ran update-angular-cli-version-17-2-0 from @nx/angular
  Update the @angular/cli package version to ~17.2.0.

  UPDATE package.json
---------------------------------------------------------
Ran move-default-base-to-nx-json-root from nx
  Moves affected.defaultBase to defaultBase in `nx.json`

  UPDATE nx.json
---------------------------------------------------------
Ran update-angular-cli-version-17-3-0 from @nx/angular
  Update the @angular/cli package version to ~17.3.0.

  UPDATE package.json
---------------------------------------------------------

 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/common@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/core@>= 10.x <= 15.x".
warning " > @sentry/[email protected]" has incorrect peer dependency "@angular/router@>= 10.x <= 15.x".
warning " > [email protected]" has incorrect peer dependency "@angular/animations@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/common@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/forms@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/platform-browser@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "@angular/router@^15.0.1".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/core@^15.0.0 || ^16.0.0".
warning "ng-zorro-antd > @angular/[email protected]" has incorrect peer dependency "@angular/common@^15.0.0 || ^16.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/common@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/core@^15.0.0".
warning "ng-zorro-antd > @ant-design/[email protected]" has incorrect peer dependency "@angular/platform-browser@^15.0.0".
warning " > @ngneat/[email protected]" has unmet peer dependency "svgo@>=3.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
$ node ./decorate-angular-cli.js && husky install

 NX   Decoration of the Angular CLI did not complete successfully

husky - Git hooks installed

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

✨  Done in 73.12s.