fix(module:water-mark): make server-side compatible (#9250)

Author: arturovt

components/water-mark/water-mark.component.ts

@@ -3,8 +3,9 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { isPlatformServer } from '@angular/common';
 import {
-  AfterViewInit,
+  afterNextRender,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -16,6 +17,7 @@ import {
   numberAttribute,
   OnChanges,
   OnInit,
+  PLATFORM_ID,
   SimpleChanges
 } from '@angular/core';
 
@@ -38,7 +40,7 @@ const FontGap = 3;
     class: 'ant-water-mark'
   }
 })
-export class NzWaterMarkComponent implements AfterViewInit, OnInit, OnChanges {
+export class NzWaterMarkComponent implements OnInit, OnChanges {
   @Input({ transform: numberAttribute }) nzWidth: number = 120;
   @Input({ transform: numberAttribute }) nzHeight: number = 64;
   @Input({ transform: numberAttribute }) nzRotate: number = -22;
@@ -49,44 +51,49 @@ export class NzWaterMarkComponent implements AfterViewInit, OnInit, OnChanges {
   @Input() nzGap: [number, number] = [100, 100];
   @Input() nzOffset: [number, number] = [this.nzGap[0] / 2, this.nzGap[1] / 2];
 
+  private isServer = isPlatformServer(inject(PLATFORM_ID));
+
   private document: Document = inject(DOCUMENT);
   private el: HTMLElement = inject(ElementRef<HTMLElement>).nativeElement;
   private cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
-  private destroyRef = inject(DestroyRef);
 
   waterMarkElement: HTMLDivElement = this.document.createElement('div');
   stopObservation: boolean = false;
 
-  observer = new MutationObserver(mutations => {
-    if (this.stopObservation) {
+  private observer: MutationObserver | null = null;
+
+  constructor() {
+    if (this.isServer) {
       return;
     }
-    mutations.forEach(mutation => {
-      if (reRendering(mutation, this.waterMarkElement)) {
-        this.destroyWatermark();
-        this.renderWatermark();
+
+    const observer = (this.observer = new MutationObserver(mutations => {
+      if (this.stopObservation) {
+        return;
       }
+      mutations.forEach(mutation => {
+        if (reRendering(mutation, this.waterMarkElement)) {
+          this.destroyWatermark();
+          this.renderWatermark();
+        }
+      });
+    }));
+
+    afterNextRender(() => {
+      this.renderWatermark();
     });
-  });
 
-  constructor() {
-    this.destroyRef.onDestroy(() => {
-      this.observer.disconnect();
-    });
+    inject(DestroyRef).onDestroy(() => observer.disconnect());
   }
 
   ngOnInit(): void {
-    this.observer.observe(this.el, {
+    this.observer?.observe(this.el, {
       subtree: true,
       childList: true,
       attributeFilter: ['style', 'class']
     });
   }
 
-  ngAfterViewInit(): void {
-    this.renderWatermark();
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
     const { nzRotate, nzZIndex, nzWidth, nzHeight, nzImage, nzContent, nzFont, gapX, gapY, offsetLeft, offsetTop } =
       changes;
@@ -228,6 +235,10 @@ export class NzWaterMarkComponent implements AfterViewInit, OnInit, OnChanges {
   }
 
   renderWatermark(): void {
+    if (this.isServer) {
+      return;
+    }
+
     if (!this.nzContent && !this.nzImage) {
       return;
     }

components/water-mark/water-mark.spec.ts

@@ -3,9 +3,12 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Component, DebugElement } from '@angular/core';
+import { ApplicationRef, Component, DebugElement, destroyPlatform } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import { bootstrapApplication, By } from '@angular/platform-browser';
+import { renderApplication } from '@angular/platform-server';
+
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { FontType } from './typings';
 import { NzWaterMarkComponent } from './water-mark.component';
@@ -85,7 +88,39 @@ describe('water-mark', () => {
   }));
 });
 
+describe('water-mark (SSR)', () => {
+  it('should render water mark on server', async () => {
+    destroyPlatform();
+
+    // `as any` because `ngDevMode` is not exposed on the global namespace typings.
+    const ngDevMode = (globalThis as NzSafeAny)['ngDevMode'];
+
+    try {
+      // Disable development-mode checks for these tests (we don't care).
+      (globalThis as NzSafeAny)['ngDevMode'] = false;
+      // Enter server mode for the duration of this function.
+      globalThis['ngServerMode'] = true;
+
+      const bootstrap = (): Promise<ApplicationRef> =>
+        bootstrapApplication(NzTestWaterMarkBasicComponent, { providers: [] });
+      const html = await renderApplication(bootstrap, {
+        document: '<html><head></head><body><nz-app></nz-app></body></html>'
+      });
+
+      expect(html).toContain('<nz-water-mark class="ant-water-mark water-mark">');
+    } finally {
+      // Restore the original value.
+      (globalThis as NzSafeAny)['ngDevMode'] = ngDevMode;
+      // Leave server mode so the remaining test is back in "client mode".
+      globalThis['ngServerMode'] = undefined;
+    }
+
+    destroyPlatform();
+  });
+});
+
 @Component({
+  selector: 'nz-app',
   imports: [NzWaterMarkModule],
   template: `
     <nz-water-mark