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 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
2. Extract Migration Steps & Create Plan File
From the documentation:
Extract post-migration tasks
Then:
Combine them into a structured migration plan
Include the additional tasks provided by the developer
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
4. 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.
5. Execute Post‑Migration
Once the developer explicitly instructs you:
Complete all post‑migration tasks in order
6. Request Version Information
After completing all post‑migration steps:
Ask the developer for the Angular and OneCX versions they want installed
7. Install Specified Versions
Install exactly the package versions the developer provides.
8. 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.

Upgrade to Angular 20

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

OneCx v7 Libs migration checklist

This checklist summarizes all breaking changes introduced in OneCx v7 libraries. Each item represents a required migration step that must be completed before your application can run with the new version. You can click the name of any change to open a detailed migration guide with instructions, code examples, and explanations.