Skip to content

fix: add Angular 20 compatibility by upgrading dependencies and migrating to application builder#806

Open
GaneshPatil7517 wants to merge 1 commit intoHSF:mainfrom
GaneshPatil7517:fix/angular20-compatibility
Open

fix: add Angular 20 compatibility by upgrading dependencies and migrating to application builder#806
GaneshPatil7517 wants to merge 1 commit intoHSF:mainfrom
GaneshPatil7517:fix/angular20-compatibility

Conversation

@GaneshPatil7517
Copy link

Summary
Resolves #728 Compatibility issue with Angular 20 and phoenix-ui-components@3.0.4.

Problem
Running the project with Angular 20 produces:

Error: No matching export in "@angular/core" for import "afterRender"
node_modules/@angular/cdk/fesm2022/overlay.mjs:7:50

This occurs because @angular/cdk@19.x references internal Angular APIs (afterRender) that were restructured in Angular 20, making CDK 19 incompatible with Angular Core 20.

Additionally, the legacy browser builder (@angular-devkit/build-angular:browser) fails under Angular 20's updated webpack configuration with node:worker_threads URI scheme errors.

Root Cause

  • @angular/cdk@^19.2.19 imports afterRender from @angular/core in a way incompatible with Angular 20
  • Angular 20 requires @angular/cdk@^20.x for aligned internal API compatibility
  • The legacy browser builder does not support node: URI schemes introduced by newer dependency versions
  • TypeScript ~5.5.4 is below Angular 20's minimum requirement of >=5.8 <6.0
  • zone.js needed alignment to ~0.15.0 per Angular 20 peer dependency

Changes Made

Dependency Upgrades

Package Before After
@angular/core (and all @angular/*) ^19.2.17 ^20.3.16
@angular/cdk ^19.2.19 ^20.2.14
@angular/material ^19.2.19 ^20.2.14
@angular-devkit/build-angular ^19.2.19 ^20.3.17
@angular/cli ~19.2.19 ~20.3.17
ng-packagr ^19.2.2 ^20.3.2
typescript ~5.5.4 ~5.8.2
zone.js ^0.16.0 ~0.15.0

Build System Migration

  • Migrated angular.json from legacy browser builder to application (esbuild) builder
  • Removed webpack-only options (vendorChunk, buildOptimizer, scripts)
  • Changed mainbrowser and polyfills from file path to array format
  • Added externalDependencies for Node.js built-ins (vm, fs, os, path, crypto, http, https, net, tls, url, assert) required by jsroot's jsdom dependency
  • Configured outputPath with base/browser structure for the application builder

Other Fixes

  • Replaced deprecated Sass @import with @use in styles.scss
  • Removed polyfills.ts from tsconfig.app.json (now handled by application builder config)

Files Changed

  • package.json — TypeScript upgrade (root)
  • packages/phoenix-event-display/package.json — TypeScript upgrade
  • packages/phoenix-ng/package.json — Angular 20 dependency upgrades
  • packages/phoenix-ng/angular.json — Builder migration + external deps
  • packages/phoenix-ng/projects/phoenix-ui-components/package.json — Angular 20 upgrades
  • packages/phoenix-ng/projects/phoenix-app/tsconfig.app.json — Remove polyfills.ts
  • packages/phoenix-ng/projects/phoenix-app/src/styles.scss — Sass @import@use
  • yarn.lock — Regenerated lockfile

Testing

  • ng build phoenix-ui-components --configuration production — passes
  • ng build phoenix-app (dev) — passes, zero errors
  • ng build phoenix-app --configuration production — passes, zero errors
  • ng serve phoenix-app — serves at localhost:4200, UI renders correctly
  • No TypeScript compilation errors
  • No afterRender import errors
  • 43 test suites / 125 unit tests pass (pre-existing jest-haste-map failures on Node.js 25.x are unrelated)

Backward Compatibility

  • The application builder is Angular's recommended builder since v17 and fully stable in v20
  • All existing component APIs, templates, and routing remain unchanged
  • No source code changes to any .ts component files
  • Phoenix-ui-components library builds and publishes identically

…ting to application builder

- Upgrade @angular/* packages from v19 to v20 (core, cdk, material, cli, etc.)
- Upgrade @angular/cdk from ^19.2.19 to ^20.2.14 to resolve afterRender import error
- Upgrade @angular-devkit/build-angular to ^20.3.17 and ng-packagr to ^20.3.2
- Upgrade TypeScript from ~5.5.4 to ~5.8.2 (required by Angular 20)
- Update zone.js to ~0.15.0 (Angular 20 peer requirement)
- Migrate angular.json from legacy browser builder to application (esbuild) builder
- Add externalDependencies for Node.js built-ins used by jsroot/jsdom
- Replace deprecated Sass @import with @use in styles.scss
- Remove polyfills.ts from tsconfig.app.json (handled by application builder)

Closes HSF#728
@GaneshPatil7517
Copy link
Author

hey @EdwardMoyse Sir
This PR addresses #728 by upgrading all Angular ecosystem dependencies from v19 to v20 and migrating the build system to the application builder.

What's in the diff:
The +4,285 / -5,722 line count is dominated by yarn.lock regeneration - the actual source changes are ~55 lines across 7 files. No component code was modified.

Key changes:

  • @angular/cdk upgraded from ^19.2.19 → ^20.2.14 (fixes the afterRender import error)
  • All @angular/* packages aligned to v20
  • TypeScript upgraded to ~5.8.2 (Angular 20 requires >=5.8)
  • angular.json migrated from legacy browser builder to application (esbuild) builder, as the webpack-based builder fails with node: URI schemes in Angular 20
  • zone.js pinned to ~0.15.0 per Angular 20 peer requirements

Testing performed locally:
Library build (phoenix-ui-components): passes
App build (dev + production): passes with zero errors
Dev server (ng serve): serves correctly at localhost:4200
43 test suites / 125 unit tests pass

Happy to address any feedback or adjust the approach if the team prefers a different upgrade strategy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Compatibility issue with Angular 20 and phoenix-ui-components@3.0.4

1 participant