Issue primefaces#12734

+ Using Document Inject for Angular SSR
Arematics · Mar 10, 2023 · 659ec0c · 659ec0c
1 parent d962143
commit 659ec0c
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 17 deletions.
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -1,5 +1,22 @@
-import { CommonModule } from '@angular/common';
-import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, Directive, ElementRef, EventEmitter, Input, NgModule, OnDestroy, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
+import {CommonModule, DOCUMENT} from '@angular/common';
+import {
+    AfterContentInit,
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    ContentChildren,
+    Directive,
+    ElementRef,
+    EventEmitter,
+    Inject,
+    Input,
+    NgModule,
+    OnDestroy,
+    Output,
+    QueryList,
+    TemplateRef,
+    ViewEncapsulation
+} from '@angular/core';
 import { PrimeTemplate } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
 import { RippleModule } from 'primeng/ripple';
@@ -81,7 +98,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
 
     private _internalClasses: string[] = Object.values(INTERNAL_BUTTON_CLASSES);
 
-    constructor(public el: ElementRef) {}
+    constructor(public el: ElementRef, @Inject(DOCUMENT) private document: Document) {}
 
     ngAfterViewInit() {
         DomHandler.addMultipleClasses(this.htmlElement, this.getStyleClass().join(' '));

diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts
@@ -17,10 +17,10 @@ import {
     TemplateRef,
     AfterContentInit,
     Output,
-    OnInit
+    OnInit, Inject
 } from '@angular/core';
 import { trigger, style, transition, animate, AnimationEvent, useAnimation, animation } from '@angular/animations';
-import { CommonModule } from '@angular/common';
+import {CommonModule, DOCUMENT} from '@angular/common';
 import { DomHandler } from 'primeng/dom';
 import { Footer, SharedModule, PrimeTemplate, PrimeNGConfig, TranslationKeys, ConfirmEventType } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
@@ -262,7 +262,13 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
 
     translationSubscription: Subscription;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, private confirmationService: ConfirmationService, public zone: NgZone, private cd: ChangeDetectorRef, public config: PrimeNGConfig) {
+    constructor(public el: ElementRef,
+                public renderer: Renderer2,
+                private confirmationService: ConfirmationService,
+                public zone: NgZone,
+                private cd: ChangeDetectorRef,
+                public config: PrimeNGConfig,
+                @Inject(DOCUMENT) private document: Document) {
         this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
             if (!confirmation) {
                 this.hide();

diff --git a/src/app/components/confirmpopup/confirmpopup.ts b/src/app/components/confirmpopup/confirmpopup.ts
@@ -1,5 +1,17 @@
-import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, OnDestroy, Input, EventEmitter, Renderer2 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+    NgModule,
+    Component,
+    ChangeDetectionStrategy,
+    ViewEncapsulation,
+    ElementRef,
+    ChangeDetectorRef,
+    OnDestroy,
+    Input,
+    EventEmitter,
+    Renderer2,
+    Inject
+} from '@angular/core';
+import {CommonModule, DOCUMENT} from '@angular/common';
 import { Confirmation, ConfirmationService, OverlayService, PrimeNGConfig, TranslationKeys } from 'primeng/api';
 import { Subscription } from 'rxjs';
 import { ButtonModule } from 'primeng/button';
@@ -116,7 +128,13 @@ export class ConfirmPopup implements OnDestroy {
         this.cd.markForCheck();
     }
 
-    constructor(public el: ElementRef, private confirmationService: ConfirmationService, public renderer: Renderer2, private cd: ChangeDetectorRef, public config: PrimeNGConfig, public overlayService: OverlayService) {
+    constructor(public el: ElementRef,
+                private confirmationService: ConfirmationService,
+                public renderer: Renderer2,
+                private cd: ChangeDetectorRef,
+                public config: PrimeNGConfig,
+                public overlayService: OverlayService,
+                @Inject(DOCUMENT) private document: Document) {
         this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
             if (!confirmation) {
                 this.hide();

diff --git a/src/app/components/dynamicdialog/dialogservice.ts b/src/app/components/dynamicdialog/dialogservice.ts
@@ -1,14 +1,25 @@
-import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, Type, EmbeddedViewRef, ComponentRef } from '@angular/core';
+import {
+    Injectable,
+    ComponentFactoryResolver,
+    ApplicationRef,
+    Injector,
+    Type,
+    EmbeddedViewRef,
+    ComponentRef,
+    Inject
+} from '@angular/core';
 import { DynamicDialogComponent } from './dynamicdialog';
 import { DynamicDialogInjector } from './dynamicdialog-injector';
 import { DynamicDialogConfig } from './dynamicdialog-config';
 import { DynamicDialogRef } from './dynamicdialog-ref';
+import {DOCUMENT} from "@angular/common";
 
 @Injectable()
 export class DialogService {
     dialogComponentRefMap: Map<DynamicDialogRef, ComponentRef<DynamicDialogComponent>> = new Map();
 
-    constructor(private componentFactoryResolver: ComponentFactoryResolver, private appRef: ApplicationRef, private injector: Injector) {}
+    constructor(private componentFactoryResolver: ComponentFactoryResolver, private appRef: ApplicationRef,
+                private injector: Injector, @Inject(DOCUMENT) private document: Document) {}
 
     public open(componentType: Type<any>, config: DynamicDialogConfig) {
         const dialogRef = this.appendDialogComponentToBody(config);

diff --git a/src/app/components/scrollpanel/scrollpanel.ts b/src/app/components/scrollpanel/scrollpanel.ts
@@ -1,5 +1,22 @@
-import { NgModule, Component, Input, AfterViewInit, OnDestroy, ElementRef, NgZone, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, AfterContentInit, ContentChildren, QueryList, TemplateRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+    NgModule,
+    Component,
+    Input,
+    AfterViewInit,
+    OnDestroy,
+    ElementRef,
+    NgZone,
+    ViewChild,
+    ChangeDetectionStrategy,
+    ViewEncapsulation,
+    ChangeDetectorRef,
+    AfterContentInit,
+    ContentChildren,
+    QueryList,
+    TemplateRef,
+    Inject
+} from '@angular/core';
+import {CommonModule, DOCUMENT} from '@angular/common';
 import { DomHandler } from 'primeng/dom';
 import { PrimeTemplate } from 'primeng/api';
 
@@ -29,7 +46,8 @@ export class ScrollPanel implements AfterViewInit, AfterContentInit, OnDestroy {
 
     @Input() styleClass: string;
 
-    constructor(public el: ElementRef, public zone: NgZone, public cd: ChangeDetectorRef) {}
+    constructor(public el: ElementRef, public zone: NgZone, public cd: ChangeDetectorRef,
+                @Inject(DOCUMENT) private document: Document) {}
 
     @ViewChild('container') containerViewChild: ElementRef;
 

diff --git a/src/app/components/speeddial/speeddial.ts b/src/app/components/speeddial/speeddial.ts
@@ -15,9 +15,9 @@ import {
     ViewChild,
     OnDestroy,
     OnInit,
-    AfterViewInit
+    AfterViewInit, Inject
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {CommonModule, DOCUMENT} from '@angular/common';
 import { SharedModule, PrimeTemplate, MenuItem } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { RippleModule } from 'primeng/ripple';
@@ -161,7 +161,7 @@ export class SpeedDial implements AfterViewInit, AfterContentInit, OnDestroy {
 
     documentClickListener: any;
 
-    constructor(private el: ElementRef, public cd: ChangeDetectorRef) {}
+    constructor(private el: ElementRef, public cd: ChangeDetectorRef, @Inject(DOCUMENT) private document: Document) {}
 
     ngAfterViewInit() {
         if (this.type !== 'linear') {