Upgrading from Angular 12 to 15 in an 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 nrwl@12.5.2 and the latest version is 15.2.8

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

> 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