chore(theme:preloader): support ssr

ng-alain · Nov 12, 2023 · 9a0630e · 9a0630e
1 parent 1dce440
commit 9a0630e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/packages/theme/src/services/preloader/preloader.spec.ts b/packages/theme/src/services/preloader/preloader.spec.ts
@@ -1,5 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import { EnvironmentInjector, Injector, runInInjectionContext } from '@angular/core';
+import { EnvironmentInjector, Injector, PLATFORM_ID, runInInjectionContext } from '@angular/core';
 
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
@@ -30,6 +30,7 @@ describe('theme: preloader', () => {
     const preloader = document.querySelector('.preloader')!;
     const injector = Injector.create({
       providers: [
+        { provide: PLATFORM_ID, useValue: 'browser' },
         {
           provide: DOCUMENT,
           useFactory: () => {
@@ -64,6 +65,7 @@ describe('theme: preloader', () => {
 
     const injector = Injector.create({
       providers: [
+        { provide: PLATFORM_ID, useValue: 'browser' },
         {
           provide: DOCUMENT,
           useFactory: () => {
@@ -77,4 +79,35 @@ describe('theme: preloader', () => {
     preloaderDone();
     expect(document.querySelector('.preloader')).toBeNull();
   });
+
+  it('#ssr', () => {
+    spyOn(document, 'querySelector').and.callFake((type: string) => {
+      if (type === '.preloader') return null;
+      if (cached[type]) return cached[type];
+      cached[type] = {
+        className: [],
+        style: {
+          overflow: ''
+        },
+        addEventListener: (_key: string, fn: NzSafeAny) => {
+          fn();
+        }
+      };
+      return cached[type];
+    });
+
+    const injector = Injector.create({
+      providers: [
+        { provide: PLATFORM_ID, useValue: 'server' },
+        {
+          provide: DOCUMENT,
+          useFactory: () => {
+            return document;
+          }
+        }
+      ]
+    }) as EnvironmentInjector;
+    runInInjectionContext(injector, () => stepPreloader());
+    expect(document.querySelector<HTMLBodyElement>('body')?.style.overflow).toBe('');
+  });
 });
diff --git a/packages/theme/src/services/preloader/preloader.ts b/packages/theme/src/services/preloader/preloader.ts
@@ -1,9 +1,13 @@
-import { DOCUMENT } from '@angular/common';
-import { inject } from '@angular/core';
+import { DOCUMENT, isPlatformServer } from '@angular/common';
+import { PLATFORM_ID, inject } from '@angular/core';
 
 export function stepPreloader(): () => void {
   const doc: Document = inject(DOCUMENT);
-  const body = doc.querySelector('body')!;
+  const ssr = isPlatformServer(inject(PLATFORM_ID));
+  if (ssr) {
+    return () => {};
+  }
+  const body = doc.querySelector<HTMLBodyElement>('body')!;
   body.style.overflow = 'hidden';
   let done = false;
 
@@ -19,7 +23,6 @@ export function stepPreloader(): () => void {
       preloader.className = CLS;
     });
     preloader.className += ` ${CLS}-add ${CLS}-add-active`;
-    const body = doc.querySelector<HTMLBodyElement>('body')!;
     body.style.overflow = '';
   };
 }