feat(ssr): add server-side rendering support

src/framework/auth/components/auth.component.ts

@@ -5,6 +5,7 @@
  */
 import { Component, OnDestroy } from '@angular/core';
 import { NbAuthService } from '../services/auth.service';
+import { takeWhile } from 'rxjs/operators/takeWhile';
 
 @Component({
   selector: 'nb-auth',
@@ -25,6 +26,8 @@ import { NbAuthService } from '../services/auth.service';
 })
 export class NbAuthComponent implements OnDestroy {
 
+  private alive = true;
+
   subscription: any;
 
   authenticated: boolean = false;
@@ -34,12 +37,13 @@ export class NbAuthComponent implements OnDestroy {
   constructor(protected auth: NbAuthService) {
 
     this.subscription = auth.onAuthenticationChange()
+      .pipe(takeWhile(() => this.alive))
       .subscribe((authenticated: boolean) => {
         this.authenticated = authenticated;
       });
   }
 
   ngOnDestroy(): void {
-    this.subscription.unsubscribe();
+    this.alive = false;
   }
 }

src/framework/theme/components/layout/layout.component.ts

@@ -6,8 +6,9 @@
 
 import {
   AfterViewInit, Component, ComponentFactoryResolver, ElementRef, HostBinding, HostListener, Input, OnDestroy,
-  Renderer2, ViewChild, ViewContainerRef, OnInit,
+  Renderer2, ViewChild, ViewContainerRef, OnInit, Inject, PLATFORM_ID,
 } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 import { Subject } from 'rxjs/Subject';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@@ -255,7 +256,7 @@ export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
   @Input()
   set windowMode(val: boolean) {
     this.windowModeValue = convertToBoolProperty(val);
-    this.withScroll = true;
+    this.withScroll = this.windowModeValue;
   }
 
   /**
@@ -269,7 +270,7 @@ export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
 
     // TODO: is this the best way of doing it? as we don't have access to body from theme styles
     // TODO: add e2e test
-    const body = document.getElementsByTagName('body')[0];
+    const body = this.document.getElementsByTagName('body')[0];
     if (this.withScrollValue) {
       this.renderer.setStyle(body, 'overflow', 'hidden');
     } else {
@@ -291,14 +292,16 @@ export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
     protected elementRef: ElementRef,
     protected renderer: Renderer2,
     protected router: Router,
+    @Inject(PLATFORM_ID) protected platformId: Object,
+    @Inject(DOCUMENT) protected document: any,
   ) {
 
     this.themeService.onThemeChange()
       .pipe(
         takeWhile(() => this.alive),
       )
       .subscribe((theme: any) => {
-        const body = document.getElementsByTagName('body')[0];
+        const body = this.document.getElementsByTagName('body')[0];
         if (theme.previous) {
           this.renderer.removeClass(body, `nb-theme-${theme.previous}`);
         }
@@ -331,7 +334,9 @@ export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
     this.spinnerService.load();
 
     // trigger first time so that after the change we have the initial value
-    this.themeService.changeWindowWidth(window.innerWidth);
+    if (isPlatformBrowser(this.platformId)) {
+      this.themeService.changeWindowWidth(window.innerWidth);
+    }
   }
 
   ngAfterViewInit() {

src/framework/theme/components/menu/menu.component.ts

@@ -16,7 +16,10 @@ import {
     QueryList,
     ElementRef,
     AfterViewInit,
+    PLATFORM_ID,
+    Inject,
   } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { takeWhile } from 'rxjs/operators/takeWhile';
@@ -49,7 +52,10 @@ export class NbMenuItemComponent implements AfterViewInit, OnDestroy {
   @ViewChildren(NbMenuItemComponent, { read: ElementRef }) subMenu: QueryList<ElementRef>;
   maxHeight: number = 0;
 
-  constructor(private menuService: NbMenuService) { }
+  constructor(
+    private menuService: NbMenuService,
+    @Inject(PLATFORM_ID) private platformId: Object,
+  ) { }
 
   ngAfterViewInit() {
     this.subMenu.changes
@@ -74,7 +80,12 @@ export class NbMenuItemComponent implements AfterViewInit, OnDestroy {
   }
 
   updateSubmenuHeight() {
-    this.menuItem.subMenuHeight = this.subMenu.reduce((acc, c) => acc + getElementHeight(c.nativeElement), 0);
+    if (isPlatformBrowser(this.platformId)) {
+      this.menuItem.subMenuHeight = this.subMenu.reduce(
+        (acc, c) => acc + getElementHeight(c.nativeElement),
+        0,
+      );
+    }
   }
 
   updateMaxHeight() {

src/framework/theme/components/popover/popover.directive.ts

@@ -4,7 +4,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { ComponentRef, Directive, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+  ComponentRef, Directive, ElementRef, HostListener,
+  Input, OnDestroy, OnInit, PLATFORM_ID, Inject,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 import { NbPositioningHelper } from './helpers/positioning.helper';
 import { NbPopoverComponent, NbPopoverContent } from './popover.component';
 import { NbThemeService } from '../../services/theme.service';
@@ -130,11 +134,16 @@ export class NbPopoverDirective implements OnInit, OnDestroy {
     return this.hostRef.nativeElement;
   }
 
-  constructor(private hostRef: ElementRef, private themeService: NbThemeService) {
-  }
+  constructor(
+    private hostRef: ElementRef,
+    private themeService: NbThemeService,
+    @Inject(PLATFORM_ID) private platformId,
+  ) {}
 
   ngOnInit() {
-    this.registerTriggers();
+    if (isPlatformBrowser(this.platformId)) {
+      this.registerTriggers();
+    }
   }
 
   ngOnDestroy() {

src/framework/theme/components/search/search.component.ts

@@ -30,6 +30,7 @@ import { delay } from 'rxjs/operators/delay';
 
 import { NbSearchService } from './search.service';
 import { NbThemeService } from '../../services/theme.service';
+import { takeWhile } from 'rxjs/operators/takeWhile';
 
 /**
  * search-field-component is used under the hood by nb-search component
@@ -169,6 +170,8 @@ export class NbSearchFieldComponent {
 })
 export class NbSearchComponent implements OnInit, AfterViewInit, OnDestroy {
 
+  private alive = true;
+
   /**
    * Tags a search with some ID, can be later used in the search service
    * to determine which search component triggered the action, if multiple searches exist on the page.
@@ -218,6 +221,7 @@ export class NbSearchComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnInit() {
     this.routerSubscription = this.router.events
       .pipe(
+        takeWhile(() => this.alive),
         filter(event => event instanceof NavigationEnd),
       )
       .subscribe(event => this.searchService.deactivateSearch(this.searchType, this.tag));
@@ -227,6 +231,7 @@ export class NbSearchComponent implements OnInit, AfterViewInit, OnDestroy {
       this.searchService.onSearchActivate(),
     ])
       .pipe(
+        takeWhile(() => this.alive),
         filter(([componentRef, data]: [ComponentRef<any>, any]) => !this.tag || data.tag === this.tag),
       )
       .subscribe(([componentRef]: [ComponentRef<any>]) => {
@@ -246,6 +251,7 @@ export class NbSearchComponent implements OnInit, AfterViewInit, OnDestroy {
       this.searchService.onSearchDeactivate(),
     ])
       .pipe(
+        takeWhile(() => this.alive),
         filter(([componentRef, data]: [ComponentRef<any>, any]) => !this.tag || data.tag === this.tag),
       )
       .subscribe(([componentRef]: [ComponentRef<any>]) => {
@@ -294,9 +300,7 @@ export class NbSearchComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.activateSearchSubscription.unsubscribe();
-    this.deactivateSearchSubscription.unsubscribe();
-    this.routerSubscription.unsubscribe();
+    this.alive = false;
 
     const componentRef = this.searchFieldComponentRef$.getValue();
     if (componentRef) {

src/framework/theme/components/sidebar/sidebar.component.ts

@@ -6,6 +6,7 @@
 
 import { Component, HostBinding, Input, OnInit, OnDestroy, ElementRef } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
+import { takeWhile } from 'rxjs/operators/takeWhile';
 
 import { convertToBoolProperty } from '../helpers';
 import { NbThemeService } from '../../services/theme.service';
@@ -117,6 +118,8 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
   protected stateValue: string;
   protected responsiveValue: boolean = false;
 
+  private alive = true;
+
   @HostBinding('class.fixed') fixedValue: boolean = false;
   @HostBinding('class.right') rightValue: boolean = false;
   @HostBinding('class.left') leftValue: boolean = true;
@@ -212,20 +215,23 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.toggleSubscription = this.sidebarService.onToggle()
+      .pipe(takeWhile(() => this.alive))
       .subscribe((data: { compact: boolean, tag: string }) => {
         if (!this.tag || this.tag === data.tag) {
           this.toggle(data.compact);
         }
       });
 
     this.expandSubscription = this.sidebarService.onExpand()
+      .pipe(takeWhile(() => this.alive))
       .subscribe((data: { tag: string }) => {
         if (!this.tag || this.tag === data.tag) {
           this.expand();
         }
       });
 
     this.collapseSubscription = this.sidebarService.onCollapse()
+      .pipe(takeWhile(() => this.alive))
       .subscribe((data: { tag: string }) => {
         if (!this.tag || this.tag === data.tag) {
           this.collapse();
@@ -234,9 +240,7 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.toggleSubscription.unsubscribe();
-    this.expandSubscription.unsubscribe();
-    this.collapseSubscription.unsubscribe();
+    this.alive = false;
     if (this.mediaQuerySubscription) {
       this.mediaQuerySubscription.unsubscribe();
     }

src/framework/theme/services/spinner.service.ts

@@ -4,17 +4,19 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Injectable } from '@angular/core';
+import { Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 /**
  * Service to control the global page spinner.
  */
-@Injectable()
 export class NbSpinnerService {
 
   private loaders: Promise<any>[] = [];
   private selector: string = 'nb-global-spinner';
 
+  constructor(@Inject(DOCUMENT) private document) {}
+
   /**
    * Appends new loader to the list of loader to be completed before
    * spinner will be hidden
@@ -66,6 +68,6 @@ export class NbSpinnerService {
   }
 
   private getSpinnerElement() {
-    return document.getElementById(this.selector);
+    return this.document.getElementById(this.selector);
   }
 }