Angular 17 to 19

Migration from Angular 17 to Angular 19

This document provides guidance for migrating from Angular 17 to Angular 19 for platform applications and libraries.

Overview

The migration process involves upgrading Angular from version 17 to 19, updating platform libraries, and handling breaking changes. All components, directives, pipes, and similar elements are standalone by default starting from Angular 19.

Important Note: Module federations do not work when connecting applications running on different Angular versions (e.g., A17 with A19). If you encounter an application that needs migration, inform the responsible team to coordinate the migration process.

Prerequisites

• Backup your code before starting migration
• Ensure you have access to the latest platform library versions
• Coordinate with teams that depend on your application if using module federation
• Important: Migrate from old data grid components (AsolGridComponent, AsolDataToolbarComponent) to new implementation before starting Angular migration

Migration Steps

1. Angular Core Migration

Run the following commands to migrate Angular step by step:

ng update @angular/core@18 @angular/cli@18 @angular/material@18 --force

ng update @angular/core@19 @angular/cli@19 @angular/material@19 --force

Note: During migration, you'll get the option to switch the build tool to esbuild. Due to module federation requirements, this is not currently possible, so stay with webpack for now. Migration to native federation (which is not dependent on the build tool) is planned.

For detailed information about changes, see: Angular Update Guide

2. Update Platform Dependencies

Update to the latest versions of platform libraries. Current versions available at: Azure DevOps Feed

{
  "@asol-platform/authentication": "^190.0.0",
  "@asol-platform/common": "^190.4.0",
  "@asol-platform/controls": "^190.13.2",
  "@asol-platform/core": "^190.0.0",
  "@asol-platform/guidance": "^190.0.0",
  "@asol-platform/services": "^190.2.0"
}

Important: The Angular migration will automatically update all @angular/* packages. Additionally, you must update these packages which are needed for the application builds:

{
  "@angular-architects/module-federation": "^19.0.3",
  "ngx-build-plus": "^19.0.0"
}

Recommended: Also update other third-party libraries to their latest compatible versions. See the Complete Dependency List section below for specific versions.

3. Clean Dependencies (if needed)

If NPM reports errors or dependencies seem broken:

rm -rf node_modules package-lock.json
npm install

4. Update URLs and Authentication

Application URLs: Update appsettings.json / environments.ts to point to Angular 19 versions:

• apps/idm-app/170 → apps/idm-app/190
• apps/store/171 → apps/store/190

Authentication Module: With Angular 19, ng-recaptcha became outdated. If using captcha, update configuration:

AsolPlatformAuthenticationModule.forRoot({
  captchaKeyV3: environment.captchaKey,
});

Remove direct ng-recaptcha key provisioning. See Captcha integration

Breaking Changes

The following components and services have been removed from platform libraries (these should have been migrated in Prerequisites):

• AsolGridComponent (old grid)
• AsolDataToolbarComponent
• AsolPlatformDataSource, AsolLoadParameters, AsolGridService, AsolStatusFieldType

If you encounter import errors: Remove these imports and use the new data grid implementation.

Testing

After migration, verify:

1. Module Federation: All connected applications run the same Angular version (check URL endpoints point to version 190)
2. Application Functionality: Test core features, grid functionality, and captcha (if used)
3. Code Quality: Run linting, prettier, unit tests, and E2E tests

Troubleshooting

Common Issues

Module Federation Not Working: Ensure all applications use Angular 19 and correct URL endpoints (190)

Missing Grid Components: Should have been migrated in Prerequisites - remove old imports and use new data grid

Captcha Issues: Remove ng-recaptcha imports, configure through AsolPlatformAuthenticationModule.forRoot()

Dependency Conflicts: Delete node_modules and package-lock.json, run npm install

Build Issues: Stay with webpack (not esbuild) for module federation compatibility

Getting Help

1. Angular Update Guide
2. Consult platform team for library-specific issues
3. Coordinate with dependent teams for module federation

Complete Dependency List

Below is a complete example of updated package.json dependencies for Angular 19:

Dependencies

{
  "@angular-architects/module-federation": "^19.0.3",
  "@angular/animations": "^19.2.14",
  "@angular/cdk": "^19.2.19",
  "@angular/common": "^19.2.14",
  "@angular/compiler": "^19.2.14",
  "@angular/core": "^19.2.14",
  "@angular/forms": "^19.2.14",
  "@angular/material": "^19.2.19",
  "@angular/platform-browser": "^19.2.14",
  "@angular/platform-browser-dynamic": "^19.2.14",
  "@angular/router": "^19.2.14",
  "@asol-platform/authentication": "^190.0.0",
  "@asol-platform/common": "^190.4.0",
  "@asol-platform/controls": "^190.13.2",
  "@asol-platform/core": "^190.0.0",
  "@asol-platform/guidance": "^190.0.0",
  "@asol-platform/services": "^190.2.0",
  "dayjs": "^1.11.13",
  "rxjs": "^7.8.2",
  "tslib": "^2.8.1",
  "zone.js": "~0.15.0"
}

DevDependencies

{
  "@angular-devkit/build-angular": "^19.2.15",
  "@angular/cli": "^19.2.15",
  "@angular/compiler-cli": "^19.2.14",
  "@angular/language-service": "^19.2.14",
  "@types/jasmine": "^5.1.7",
  "@types/jasminewd2": "^2.0.13",
  "@types/node": "^22.14.0",
  "@typescript-eslint/eslint-plugin": "^8.35.0",
  "@typescript-eslint/parser": "^8.35.0",
  "eslint": "^9.29.0",
  "eslint-config-prettier": "^10.1.5",
  "eslint-plugin-prettier": "^5.5.1",
  "jasmine-core": "^5.6.0",
  "jasmine-spec-reporter": "^7.0.0",
  "karma": "^6.4.4",
  "karma-chrome-launcher": "^3.2.0",
  "karma-coverage": "^2.2.1",
  "karma-jasmine": "^5.1.0",
  "karma-jasmine-html-reporter": "^2.1.0",
  "ngx-build-plus": "^19.0.0",
  "prettier": "^3.6.1",
  "prettier-eslint": "^16.4.2",
  "ts-node": "^10.9.2",
  "typescript": "^5.8.3"
}

---