Upgrade NX Application to Angular 20

This guide describes how to upgrade an NX-based OneCX application to Angular 20. Complete the pre-migration steps from the main migration guide before you continue.

Update NX Packages

Update the Angular and NX packages in your workspace by running:

nx migrate 22.3.0 --interactive

This command prompts you to apply updates for each major version of Angular and TypeScript. Apply all proposed updates up to Angular 20.3 and TypeScript 5.9.

For details on NX / Angular compatibility, refer to the Angular NX Version Matrix.

For details on nx migrate, refer to the official documentation: NX Migrate Documentation.

Update Package Versions in package.json

  1. After running the migration command, update the remaining packages manually. Update all @onecx/* packages to version ^7.0.0.

  2. Update the packages listed here to the specified versions: Required Package Updates.

  3. After updating package.json, run npm install to install the new versions. If you see peer dependency errors, update the affected packages to compatible versions.

If you still see dependency conflicts that reference old versions, reinstall dependencies from scratch:

rm -rf node_modules package-lock.json .angular dist ~/.angular/cache && npm cache clean --force && npm install

Make sure to migrate the updated packages and resolve any breaking changes. Refer to the official documentation of each package for migration guides and instructions.

Run NX Migration

After updating the package versions, run the following command to apply the generated migrations:

nx migrate --run-migrations

After this step, proceed with the remaining post-migration steps.