Component: DynamicDialog not working with zonejs less application

[Trolejbus]

Describe the bug

I am not sure if PrimeNg lib is adapted to work with zonejs less Angular application (with provideExperimentalZonelessChangeDetection()), but if so than after closing dynamic dialog with overlay mask behind it, dialog is correctly closed, but overlay is not destroyed from html.

Environment

Windows/Chrome 128.0.6613.138

Reproducer

https://stackblitz.com/edit/stackblitz-starters-tpcpxh?file=src%2Fmain.ts

Angular version

18.0.2

PrimeNG version

17.18.10

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.10.0

Browser(s)

Chrome 128.0.6613.138

Steps to reproduce the behavior

1. Navigate to provided stackblitz
2. Click "Open dialog" button.
3. Close dialog.
4. Click "Open dialog" button again. - it should not be possible since overlay is not allowing to click button.

Uncommenting commented code fixes issue.

Expected behavior

Overlay should be destroyed after closing dialog.

[juanchavezlive]

Same error here. Had to remove Zoneless support

[Trolejbus]

Same error here. Had to remove Zoneless support

Hey, you can check my example. In this particular issue you can trigger change detection manually as a potential workaround for this issue :)

[Bock92]

Hi guys, I found another solution about this issue:

Suppose to have a method that called this line of code: this.dialogService.open<LoaderComponent>(LoaderComponent, { data: {...} });

Inside the LoaderComponent inject the DynamicDialogConfig and implement the OnDestroy interface with the following line of code: this.dynamicDialogRef.destroy();

This will clean and remove from the DOM the dialog in a proper way.

This solution allows you to open a modal directly from an Angular Service, NgRx Signal Store, or other non-component contexts, where ChangeDetectorRef isn't accessible.

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[ThoSap]

@Trolejbus @Bock92 @cetincakiroglu the issue has been present and has been caused since the Angular 18.2.2 release and is unrelated to the mentioned PrimeNG 17.18.10 release.

My zoneless PrimeNG application worked perfectly fine with PrimeNG 17.18.15 until I upgraded from Angular 18.2.0 to 18.2.13.

I thoroughly tracked down the root cause of the bug, and it seems to be a change in the @angular/[email protected] package. If I upgrade ALL @angular/* dependencies to 18.2.13 and pin @angular/core to 18.2.1, my dynamic dialog properly closes and destroys the overlay mask.

The change that causes this is an afterRender hook change in @angular/core, which is not even mentioned in the Angular 18.2.2 changelog: https://github.com/angular/angular/commit/800f6c8ca3e8b6706c0abf5f9d5b87bf5aec0d1d https://github.com/angular/angular/commit/6059ca8f1f3c67003292d3380dbfa523b41eade5 https://github.com/angular/angular/commit/b80af11bbf47e7d908fed741190efb723afcc3e9

@alxhub could you please have a quick lock at PR https://github.com/primefaces/primeng/pull/17123 if this is a proper fix after the Angular 18.2.2 afterRender hook change or is the "workaround" https://github.com/primefaces/primeng/issues/16402#issuecomment-2460269317 the proper way to clean things up?

After this change even some Angular tests and the angular.dev website had to add an additional ref destroy call, the same as we did with the workaround in https://github.com/primefaces/primeng/issues/16402#issuecomment-2460269317, see: https://github.com/angular/angular/commit/df42d2be163fb5ebcee54bbc82df982137b041b1 https://github.com/angular/angular/commit/5e9661d69ca21720f8a37f7f2bef5a99d3d3223b

Related PRs: https://github.com/angular/angular/pull/57453 https://github.com/angular/angular/pull/57504 https://github.com/angular/angular/pull/57546 https://github.com/angular/angular/issues/57552 https://github.com/angular/angular/pull/57554