primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
9.53k stars 4.47k forks source link

DomHandler no support with Angular SSR #15354

Open kusmierczykw opened 2 weeks ago

kusmierczykw commented 2 weeks ago

Describe the bug

There is a problem with support SSR by the DomHandler. I try to open dialog on enter to concrete page in the app but the app crashes. The same problem is with Sidebar component.

image

Reproducer

https://stackblitz.com/edit/stackblitz-starters-cjg9pe?file=src%2Fapp%2Fapp.component.html

Angular version

SSR

PrimeNG version

17.14.1

Build / Runtime

Angular CLI App

Language

TypeScript

Steps to reproduce the behavior

Add simple fragment of code to the app.component.html file:

<p-dialog [visible]="true" [modal]="true">
    This is a asimple test.
</p-dialog>

and run app with SSR mode.

The app carshes with the following error:

ERROR ReferenceError: document is not defined
    at _DomHandler.blockBodyScroll (/home/projects/stackblitz-starters-cjg9pe/.angular/vite-root/demo/main.server.mjs:1661:5)
    at _Dialog.enableModality (/home/projects/stackblitz-starters-cjg9pe/.angular/vite-root/demo/main.server.mjs:4139:18)

Expected behavior

Support SSR by the DomHandler.

kusmierczykw commented 2 weeks ago

The workaround for this example is use:

  public readonly isBrowser = isPlatformBrowser(this.platformId);

  public constructor(
    private readonly navigator: NavigatorService,
    @Inject(PLATFORM_ID) private readonly platformId: object,
  ) {}

and

@if (isBrowser) {
  <p-dialog
    [visible]="true">
    This is example content.
  </p-dialog>
}

But this does not change the fact that DomHandler does not support SSR.