refactoring

npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

@@ -34,9 +34,11 @@ import {
 } from '@abp/ng.components/extensible';
 import {
   Component,
+  Inject,
   inject,
   Injector,
   OnInit,
+  PLATFORM_ID,
   TemplateRef,
   TrackByFunction,
   ViewChild,
@@ -54,6 +56,7 @@ import { eIdentityComponents } from '../../enums/components';
 import { PageComponent } from '@abp/ng.components/page';
 import { NgbDropdownModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { isPlatformBrowser } from '@angular/common';
 
 @Component({
   selector: 'abp-users',
@@ -121,6 +124,8 @@ export class UsersComponent implements OnInit {
 
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
+  constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+
   onVisiblePermissionChange = (event: boolean) => {
     this.visiblePermissions = event;
   };

npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts

@@ -1,5 +1,13 @@
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { AfterViewInit, Directive, HostBinding, Inject, Input, OnDestroy } from '@angular/core';
+import {
+  AfterViewInit,
+  Directive,
+  HostBinding,
+  Inject,
+  Input,
+  OnDestroy,
+  PLATFORM_ID,
+} from '@angular/core';
 import { ColumnMode, DatatableComponent, ScrollerComponent } from '@swimlane/ngx-datatable';
 import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -22,6 +30,7 @@ export class NgxDatatableDefaultDirective implements AfterViewInit, OnDestroy {
 
   constructor(
     private table: DatatableComponent,
+    @Inject(PLATFORM_ID) private platformId: object,
     @Inject(DOCUMENT) private document: MockDocument,
   ) {
     this.table.columnMode = ColumnMode.force;
@@ -34,31 +43,34 @@ export class NgxDatatableDefaultDirective implements AfterViewInit, OnDestroy {
 
   private fixHorizontalGap(scroller: ScrollerComponent) {
     const { body, documentElement } = this.document;
-
+    if (isPlatformBrowser(this.platformId)) {
-    if (documentElement.scrollHeight !== documentElement.clientHeight) {
+      if (documentElement.scrollHeight !== documentElement.clientHeight) {
-      if (this.resizeDiff === 0) {
+        if (this.resizeDiff === 0) {
-        this.resizeDiff = window.innerWidth - body.offsetWidth;
+          this.resizeDiff = window.innerWidth - body.offsetWidth;
-        scroller.scrollWidth -= this.resizeDiff;
+          scroller.scrollWidth -= this.resizeDiff;
+        }
+      } else {
+        scroller.scrollWidth += this.resizeDiff;
+        this.resizeDiff = 0;
       }
-    } else {
-      scroller.scrollWidth += this.resizeDiff;
-      this.resizeDiff = 0;
     }
   }
 
   private fixStyleOnWindowResize() {
     // avoided @HostListener('window:resize') in favor of performance
-    const subscription = fromEvent(window, 'resize')
+    if (isPlatformBrowser(this.platformId)) {
-      .pipe(debounceTime(500))
+      const subscription = fromEvent(window, 'resize')
-      .subscribe(() => {
+        .pipe(debounceTime(500))
-        const { scroller } = this.table.bodyComponent;
+        .subscribe(() => {
+          const { scroller } = this.table.bodyComponent;
 
-        if (!scroller) return;
+          if (!scroller) return;
 
-        this.fixHorizontalGap(scroller);
+          this.fixHorizontalGap(scroller);
-      });
+        });
 
-    this.subscription.add(subscription);
+      this.subscription.add(subscription);
+    }
   }
 
   ngAfterViewInit() {