feat: support server-side rendering (#3295)

* feat: support server-side rendering close #3222, close #43 ref #2025,#2474 style: fix lint docs: add the docs docs: fix ssr docs docs: update README chore: rebase * style: fix lint * docs: fix README
NG-ZORRO · Apr 19, 2019 · 2088459 · 2088459
1 parent 3da4b68
commit 2088459
Show file tree

Hide file tree

Showing 31 changed files with 425 additions and 100 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -37,6 +37,7 @@ Ant Design 的 Angular 实现，开发和服务于企业级后台产品。
 ## 🖥 支持环境
 
 - Angular `^7.0.0`
+- 支持服务端渲染
 - 现代浏览器，以及 Internet Explorer 11+ （使用 [polyfills](https://angular.io/guide/browser-support)）
 - [Electron](http://electron.atom.io/)
 

diff --git a/README.md b/README.md
@@ -38,6 +38,7 @@ English | [简体中文](README-zh_CN.md)
 ## 🖥 Environment Support
 
 * Angular `^7.0.0`
+* Server-side Rendering
 * Modern browsers and Internet Explorer 11+ (with [polyfills](https://angular.io/guide/browser-support))
 * [Electron](http://electron.atom.io/)
 

diff --git a/components/affix/nz-affix.component.ts b/components/affix/nz-affix.component.ts
@@ -1,3 +1,4 @@
+import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -37,10 +38,12 @@ import {
 export class NzAffixComponent implements OnInit, OnDestroy {
   @Input()
   set nzTarget(value: string | Element | Window) {
-    this.clearEventListeners();
-    this._target = typeof value === 'string' ? this.doc.querySelector(value) : value || window;
-    this.setTargetEventListeners();
-    this.updatePosition({} as Event);
+    if (this.platform.isBrowser) {
+      this.clearEventListeners();
+      this._target = typeof value === 'string' ? this.doc.querySelector(value) : value || window;
+      this.setTargetEventListeners();
+      this.updatePosition({} as Event);
+    }
   }
 
   @Input()
@@ -75,13 +78,21 @@ export class NzAffixComponent implements OnInit, OnDestroy {
 
   private affixStyle: NGStyleInterface | undefined;
   private placeholderStyle: NGStyleInterface | undefined;
-  private _target: Element | Window = window;
+  private _target: Element | Window | null = null;
   private _offsetTop: number | null;
   private _offsetBottom: number | null;
 
-  // tslint:disable-next-line:no-any
-  constructor(_el: ElementRef, private scrollSrv: NzScrollService, @Inject(DOCUMENT) private doc: any) {
+  constructor(
+    _el: ElementRef,
+    private scrollSrv: NzScrollService,
+    // tslint:disable-next-line:no-any
+    @Inject(DOCUMENT) private doc: any,
+    private platform: Platform
+  ) {
     this.placeholderNode = _el.nativeElement;
+    if (this.platform.isBrowser) {
+      this._target = window;
+    }
   }
 
   ngOnInit(): void {
@@ -127,15 +138,19 @@ export class NzAffixComponent implements OnInit, OnDestroy {
 
   private setTargetEventListeners(): void {
     this.clearEventListeners();
-    this.events.forEach((eventName: string) => {
-      this._target.addEventListener(eventName, this.updatePosition, false);
-    });
+    if (this.platform.isBrowser) {
+      this.events.forEach((eventName: string) => {
+        this._target!.addEventListener(eventName, this.updatePosition, false);
+      });
+    }
   }
 
   private clearEventListeners(): void {
-    this.events.forEach(eventName => {
-      this._target.removeEventListener(eventName, this.updatePosition, false);
-    });
+    if (this.platform.isBrowser) {
+      this.events.forEach(eventName => {
+        this._target!.removeEventListener(eventName, this.updatePosition, false);
+      });
+    }
   }
 
   private getTargetRect(target: Element | Window | undefined): ClientRect {
@@ -207,11 +222,14 @@ export class NzAffixComponent implements OnInit, OnDestroy {
 
   @throttleByAnimationFrameDecorator()
   updatePosition(e: Event): void {
-    const targetNode = this._target;
+    if (!this.platform.isBrowser) {
+      return;
+    }
+    const targetNode = this._target as (HTMLElement | Window);
     // Backwards support
     let offsetTop = this.nzOffsetTop;
-    const scrollTop = this.scrollSrv.getScroll(targetNode, true);
-    const elemOffset = this.getOffset(this.placeholderNode, targetNode);
+    const scrollTop = this.scrollSrv.getScroll(targetNode!, true);
+    const elemOffset = this.getOffset(this.placeholderNode, targetNode!);
     const fixedNode = this.fixedEl.nativeElement as HTMLElement;
     const elemSize = {
       width: fixedNode.offsetWidth,
@@ -229,7 +247,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
       offsetMode.top = typeof offsetTop === 'number';
       offsetMode.bottom = typeof this._offsetBottom === 'number';
     }
-    const targetRect = this.getTargetRect(targetNode);
+    const targetRect = this.getTargetRect(targetNode as Window);
     const targetInnerHeight = (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
     if (scrollTop >= elemOffset.top - (offsetTop as number) && offsetMode.top) {
       const width = elemOffset.width;

diff --git a/components/anchor/nz-anchor-link.component.ts b/components/anchor/nz-anchor-link.component.ts
@@ -1,3 +1,4 @@
+import { Platform } from '@angular/cdk/platform';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -55,6 +56,7 @@ export class NzAnchorLinkComponent implements OnInit, OnDestroy {
     public elementRef: ElementRef,
     private anchorComp: NzAnchorComponent,
     private cdr: ChangeDetectorRef,
+    private platform: Platform,
     renderer: Renderer2
   ) {
     renderer.addClass(elementRef.nativeElement, 'ant-anchor-link');
@@ -67,7 +69,9 @@ export class NzAnchorLinkComponent implements OnInit, OnDestroy {
   goToClick(e: Event): void {
     e.preventDefault();
     e.stopPropagation();
-    this.anchorComp.handleScrollTo(this);
+    if (this.platform.isBrowser) {
+      this.anchorComp.handleScrollTo(this);
+    }
   }
 
   markForCheck(): void {

diff --git a/components/anchor/nz-anchor.component.ts b/components/anchor/nz-anchor.component.ts
@@ -1,3 +1,4 @@
+import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import {
   AfterViewInit,
@@ -74,8 +75,13 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
   private scroll$: Subscription | null = null;
   private destroyed = false;
 
-  /* tslint:disable-next-line:no-any */
-  constructor(private scrollSrv: NzScrollService, @Inject(DOCUMENT) private doc: any, private cdr: ChangeDetectorRef) {}
+  constructor(
+    private scrollSrv: NzScrollService,
+    /* tslint:disable-next-line:no-any */
+    @Inject(DOCUMENT) private doc: any,
+    private cdr: ChangeDetectorRef,
+    private platform: Platform
+  ) {}
 
   registerLink(link: NzAnchorLinkComponent): void {
     this.links.push(link);
@@ -99,6 +105,9 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
   }
 
   private registerScrollEvent(): void {
+    if (!this.platform.isBrowser) {
+      return;
+    }
     this.removeListen();
     this.scroll$ = fromEvent(this.getTarget(), 'scroll')
       .pipe(

diff --git a/components/avatar/nz-avatar.component.ts b/components/avatar/nz-avatar.component.ts
@@ -1,3 +1,4 @@
+import { Platform } from '@angular/cdk/platform';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -52,7 +53,8 @@ export class NzAvatarComponent implements OnChanges {
     private elementRef: ElementRef,
     private cd: ChangeDetectorRef,
     private updateHostClassService: NzUpdateHostClassService,
-    private renderer: Renderer2
+    private renderer: Renderer2,
+    private platform: Platform
   ) {}
 
   setClass(): this {
@@ -114,9 +116,11 @@ export class NzAvatarComponent implements OnChanges {
 
   private notifyCalc(): this {
     // If use ngAfterViewChecked, always demands more computations, so......
-    setTimeout(() => {
-      this.calcStringSize();
-    });
+    if (this.platform.isBrowser) {
+      setTimeout(() => {
+        this.calcStringSize();
+      });
+    }
     return this;
   }
 

diff --git a/components/back-top/nz-back-top.component.ts b/components/back-top/nz-back-top.component.ts
@@ -1,3 +1,4 @@
+import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -53,8 +54,13 @@ export class NzBackTopComponent implements OnInit, OnDestroy {
 
   @Output() readonly nzClick: EventEmitter<boolean> = new EventEmitter();
 
-  // tslint:disable-next-line:no-any
-  constructor(private scrollSrv: NzScrollService, @Inject(DOCUMENT) private doc: any, private cd: ChangeDetectorRef) {}
+  constructor(
+    private scrollSrv: NzScrollService,
+    // tslint:disable-next-line:no-any
+    @Inject(DOCUMENT) private doc: any,
+    private platform: Platform,
+    private cd: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     if (!this.scroll$) {
@@ -86,6 +92,9 @@ export class NzBackTopComponent implements OnInit, OnDestroy {
   }
 
   private registerScrollEvent(): void {
+    if (!this.platform.isBrowser) {
+      return;
+    }
     this.removeListen();
     this.handleScroll();
     this.scroll$ = fromEvent(this.getTarget(), 'scroll')

diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts
@@ -115,6 +115,9 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
   }
 
   ngAfterViewInit(): void {
+    if (!this.platform.isBrowser) {
+      return;
+    }
     this.slickListEl = this.slickList.nativeElement;
     this.slickTrackEl = this.slickTrack.nativeElement;
 
@@ -156,7 +159,9 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
 
   ngOnDestroy(): void {
     this.clearScheduledTransition();
-    this.strategy.dispose();
+    if (this.strategy) {
+      this.strategy.dispose();
+    }
     this.dispose();
 
     this.destroy$.next();