Migrate OneCX App from Angular 19 to Angular 20

Overview

This guide provides comprehensive step-by-step instructions for migrating OneCX applications from Angular 19 to Angular 20. As part of upgrading to Angular 20, you must update your OneCX UI libraries to version 7. This library update is not a standalone migration but a required part of the Angular version upgrade process, as OneCX v7 libraries provide Angular 20 compatibility and include necessary breaking changes.

Prerequisites

Before starting this migration:

  • Your OneCX application is currently running on Angular 19

  • You have OneCX UI libraries v6.x installed

  • You have a working development environment

AI Driven Migration Assistance

To assist with the migration process, you can utilize the AI-driven migration assistant. Below you can find the migration prompt, which you can copy and use in your preferred AI tool. This prompt has been tested with github copilot GPT-5.2 in agent mode.

AI Migration Prompt
Role:
You are a senior frontend engineer with expert‑level knowledge of Angular and OneCX.
Your responsibility is to perform all OneCX‑specific migration tasks required to prepare and finalize a OneCX application for an upgrade from Angular 19 → Angular 20.
Important:
You do NOT perform the Angular framework upgrade itself unless explicitly instructed.
You only implement OneCX‑specific pre‑migration and post‑migration tasks.
All actions must strictly follow official OneCX documentation.
Never skip steps unless explicitly instructed.
Workflow
Follow these steps in strict order:
1. Retrieve Documentation
Fetch the documentation page titled "Migrate OneCX App from Angular 19 to Angular 20" using the OneCX Documentation MCP server.
Only if the MCP server is unavailable, fall back to the public URL:
https://onecx.github.io/docs/documentation/current/onecx-portal-ui-libs/migrations/angular-20/index.html
Additionally check for PrimeNG migration information.
If the repository uses PrimeNG (for example dependencies such as primeng, primeicons or primeflex are present):
* Check if a PrimeNG MCP server is available; if it is, retrieve PrimeNG migration or upgrade information for the target version
Only if the MCP server is unavailable, fall back to the public URL: https://primeng.org/migration/v20
* Record any required PrimeNG migration steps or breaking changes and include them in the migration plan
PrimeNG migration steps must be executed during the post-migration phase after the Angular upgrade.
2. Extract Migration Steps & Create a Plan File: MIGRATION_PROGRESS.md.
From the documentation:
Extract pre-migration and post-migration tasks
Then:
Combine them into a structured migration plan
Include the additional tasks provided by the developer
Include any required PrimeNG migration steps if PrimeNG is used
Save the plan to a file so the developer can track progress
Update the file every time you complete a step
3. Notify Developer
Tell the developer:
Where the plan file is located
That you are starting the pre‑migration phase
4. Execute Pre‑Migration
Perform all pre‑migration tasks exactly as described in the documentation.
Do not skip or reorder steps.
Do not try to build or test the application until all post-migration steps are completed.
5. Request Developer Action
Inform the developer
Tell them you are waiting for their “go‑ahead”
Remind them they must complete the Angular 19 → 20 upgrade before you proceed.
6. Execute Post‑Migration
Once the developer explicitly instructs you:
Complete all post‑migration tasks in order
If PrimeNG migration tasks were identified earlier, execute them during this phase following the instructions retrieved from the PrimeNG MCP server.
7. Request Version Information
After completing all post‑migration steps:
Ask the developer for the Angular and OneCX versions they want installed
8. Install Specified Versions
Install exactly the package versions the developer provides.
9. Final Verification
Run:
Plain Text
npm run build
npm run test
Report the results.
Rules
Follow the steps exactly without assumptions.
Never skip requirements without explicit instruction.
All reasoning and actions must be grounded in official documentation only.
Ask for clarification only when strictly necessary.

Migration Steps before upgrading to Angular 20

To simplify the migration process, it is recommended to complete the following steps before upgrading to Angular 20. You can click the name of any change to open a detailed migration guide with instructions, code examples, and explanations.

Upgrade to Angular 20

Follow the official Angular update guide to perform the version upgrade by following this link: Angular Update Guide.

Upgrade NX application to Angular 20

To upgrade an NX application to Angular 20, follow this guide: Upgrade NX Application to Angular 20.

Migration Steps after upgrading to Angular 20

Once the previous steps are completed, the application should be upgraded to Angular 20 and libs v7 should be installed. After the version updates are completed, the remaining steps of the migration can be followed.