Compatibility issue with Angular 20 and [email protected]

[NikhilSharma201]

Hi CERN Phoenix team 👋 I'm exploring contributions and running the event-display-app locally using Angular 20.3.6 and [email protected]. On npm start, I encountered the following error:

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

It seems phoenix-ui-components is pulling in @angular/[email protected], which may not be compatible with Angular 20. I confirmed this via npm ls @angular/cdk.

Environment: Angular CLI: 20.3.6 Angular Core: 20.3.6 phoenix-ui-components: 3.0.4 Node.js: 22.19.0

Would love guidance on whether Angular 20 support is planned, or if I should downgrade to Angular 18 for now. Happy to help test or contribute a patch if needed!

[EdwardMoyse]

Hi @NikhilSharma201 - yes, I'm afraid updating to Angular 20 is proving a bit problematic. :-(

[NikhilSharma201]

Hi @NikhilSharma201 - yes, I'm afraid updating to Angular 20 is proving a bit problematic. :-(

Thanks, @EdwardMoyse - I’ll explore a temporary Angular 18 setup to keep contributing. If Angular 20 support is planned or needs testing, I’d be happy to help!

[EdwardMoyse]

I had a go at getting it working in #729 - so feel free to have a look, or I'll come back to it again when I have some more time.