fix: add Angular 20 compatibility by upgrading dependencies and migrating to application builder#806
Open
GaneshPatil7517 wants to merge 1 commit intoHSF:mainfrom
Open
Conversation
…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
Author
|
hey @EdwardMoyse Sir What's in the diff: Key changes:
Testing performed locally: Happy to address any feedback or adjust the approach if the team prefers a different upgrade strategy. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.xreferences internal Angular APIs (afterRender) that were restructured in Angular 20, making CDK 19 incompatible with Angular Core 20.Additionally, the legacy
browserbuilder (@angular-devkit/build-angular:browser) fails under Angular 20's updated webpack configuration withnode:worker_threadsURI scheme errors.Root Cause
@angular/cdk@^19.2.19importsafterRenderfrom@angular/corein a way incompatible with Angular 20@angular/cdk@^20.xfor aligned internal API compatibilitybrowserbuilder does not supportnode:URI schemes introduced by newer dependency versions~5.5.4is below Angular 20's minimum requirement of>=5.8 <6.0zone.jsneeded alignment to~0.15.0per Angular 20 peer dependencyChanges Made
Dependency Upgrades
@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.17ng-packagr^19.2.2^20.3.2typescript~5.5.4~5.8.2zone.js^0.16.0~0.15.0Build System Migration
angular.jsonfrom legacybrowserbuilder toapplication(esbuild) buildervendorChunk,buildOptimizer,scripts)main→browserandpolyfillsfrom file path to array formatexternalDependenciesfor Node.js built-ins (vm,fs,os,path,crypto,http,https,net,tls,url,assert) required by jsroot's jsdom dependencyoutputPathwithbase/browserstructure for the application builderOther Fixes
@importwith@useinstyles.scsspolyfills.tsfromtsconfig.app.json(now handled by application builder config)Files Changed
package.json— TypeScript upgrade (root)packages/phoenix-event-display/package.json— TypeScript upgradepackages/phoenix-ng/package.json— Angular 20 dependency upgradespackages/phoenix-ng/angular.json— Builder migration + external depspackages/phoenix-ng/projects/phoenix-ui-components/package.json— Angular 20 upgradespackages/phoenix-ng/projects/phoenix-app/tsconfig.app.json— Remove polyfills.tspackages/phoenix-ng/projects/phoenix-app/src/styles.scss— Sass @import → @useyarn.lock— Regenerated lockfileTesting
ng build phoenix-ui-components --configuration production— passesng build phoenix-app(dev) — passes, zero errorsng build phoenix-app --configuration production— passes, zero errorsng serve phoenix-app— serves at localhost:4200, UI renders correctlyafterRenderimport errorsBackward Compatibility
applicationbuilder is Angular's recommended builder since v17 and fully stable in v20.tscomponent files