Upgrading angular version doesn't work with nx migrate

[Cronnay]

Hey!

We are using NX for our monorepo with 5 angular apps. Right now, we have angular version 14.3, and need to upgrade. Might need to do it incrementally, but need help to update.

I tried running npx nx migrate latest and then npx nx migrate --run-migrations, and I can see my nx libraries got updated, but not my @angular packages did not.
I read something about using @nx/angular packages rather than the @angular ones. Seems like that migration seems to be missed?

My package.json AFTER running the migration looks like this:

  "dependencies": {
    "@angular-slider/ngx-slider": "^14.0.0",
    "@angular/animations": "~14.3.0",
    "@angular/cdk": "~14.2.7",
    "@angular/common": "~14.3.0",
    "@angular/compiler": "~14.3.0",
    "@angular/core": "~14.3.0",
    "@angular/forms": "~14.3.0",
    "@angular/localize": "~14.3.0",
    "@angular/material": "~14.2.7",
    "@angular/platform-browser": "~14.3.0",
    "@angular/platform-browser-dynamic": "~14.3.0",
    "@angular/router": "~14.3.0",
    "@fortawesome/angular-fontawesome": "^0.11.1",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@fortawesome/fontawesome-svg-core": "^6.5.1",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@improbable-eng/grpc-web": "^0.13.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@nx/cypress": "20.0.1",
    "@stomp/ng2-stompjs": "^8.0.0",
    "debounce": "^1.2.1",
    "google-proto-files": "^1.1.2",
    "google-protobuf": "^3.12.4",
    "grpc-web": "^1.0.7",
    "jspdf": "^2.3.1",
    "jspdf-autotable": "^3.5.6",
    "ng4-click-outside": "1.0.1",
    "primeicons": "^6.0.1",
    "primeng": "^14.2.1",
    "protoc": "1.0.4",
    "protoc-gen-grpc-web": "^1.0.4",
    "rxjs": "^6.6.2",
    "tslib": "^2.0.0",
    "uuid": "^7.0.3",
    "vis-data": "6.5.1",
    "vis-timeline": "7.3.5",
    "zone.js": "~0.11.4"
},
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.13",
    "@angular-devkit/core": "~14.2.13",
    "@angular-devkit/schematics": "~14.2.13",
    "@angular-eslint/eslint-plugin": "14.4.0",
    "@angular-eslint/eslint-plugin-template": "14.4.0",
    "@angular-eslint/template-parser": "14.4.0",
    "@angular/cli": "~14.2.13",
    "@angular/compiler-cli": "~14.3.0",
    "@angular/language-service": "~14.3.0",
    "@babel/compat-data": "7.9.0",
    "@cypress/webpack-dev-server": "^2.0.0",
    "@grpc/proto-loader": "^0.3.0",
    "@nx/angular": "20.0.1",
    "@nx/eslint": "20.0.1",
    "@nx/eslint-plugin": "20.0.1",
    "@nx/js": "20.0.1",
    "@nx/workspace": "20.0.1",
    "@schematics/angular": "~14.0.2",
    "@swc-node/register": "1.9.2",
    "@swc/core": "1.5.7",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^18.16.9",
    "@typescript-eslint/eslint-plugin": "7.18.0",
    "@typescript-eslint/parser": "7.18.0",
    "cypress": "^13.0.0",
    "cypress-keycloak": "^2.0.2",
    "eslint": "8.57.1",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-cypress": "^2.13.4",
    "grpc": "^1.15.0",
    "grpc-web": "^1.0.7",
    "html-webpack-plugin": "^5.5.0",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.10",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "^2.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "moment": "^2.29.1",
    "nx": "20.0.1",
    "prettier": "^2.6.2",
    "ts-node": "~7.0.0",
    "typescript": "~4.6.4"
  }

How do I update the @angular specific ones?

[Cronnay]

Okay so from my understanding, running "nx migrate latest" should provide an updated angular in the migrations.json, but some reason it doesn't work for me?

[Cronnay]

Okay! So now I see. The documentation seems very vague, but now I understand how upgrading works.

Upgrading with nx migrate latest only updates the @nx ones. If you want to upgrade angular specific ones, you'll have to upgrade and migrate one after another, like:

1. npx nx migrate @angular/cli@15
2. npx nx migrate --run-migration
3. npx nx migrate @angular/core@15
4. npx nx migrate --run-migration

I couldn't find any way of upgrading and migrating multiple packages at the same time. This seems to be the way.

Also - follow angular's update guide to see the version of Typescript + node, what is needed for you to run the application.