Merge pull request #17 from thisissoon/feature/fix-universal-regression

fix(InViewport): Fixed a regression when used in angular universal app

.angular-cli.json

@@ -51,6 +51,9 @@
   "test": {
     "karma": {
       "config": "./karma.conf.js"
+    },
+    "codeCoverage": {
+      "exclude": ["./src/app/testing/*.ts"]
     }
   },
   "defaults": {

src/app/in-viewport/in-viewport.directive.spec.ts

@@ -1,5 +1,6 @@
 import { fakeAsync, tick } from '@angular/core/testing';
 import { ElementRef, NgZone } from '@angular/core';
+import { ɵPLATFORM_BROWSER_ID, ɵPLATFORM_SERVER_ID } from '@angular/common';
 import { WindowRef } from './window/window.service';
 import { InViewportDirective } from './in-viewport.directive';
 import { FakeDOMStandardElement } from '../testing/dom';
@@ -26,7 +27,7 @@ describe('InViewportDirective', () => {
     el = new ElementRef(node);
     el.nativeElement.getBoundingClientRect = rectSpy;
     zone = new MockNgZone();
-    directive = new InViewportDirective(el, windowRef, <any>cdRef, zone);
+    directive = new InViewportDirective(el, windowRef, <any>cdRef, zone, ɵPLATFORM_BROWSER_ID);
     directive.ngAfterViewInit();
   });
 
@@ -185,5 +186,18 @@ describe('InViewportDirective', () => {
       const result = directive.isInElementViewport({ left: 0, right: 1366, top: 0, bottom: 500 }, { getBoundingClientRect: null });
       expect(result).toBeFalsy();
     });
+
+    it('should NOT subscribe to DOM event observables', () => {
+      directive = new InViewportDirective(el, windowRef, <any>cdRef, zone, ɵPLATFORM_BROWSER_ID);
+      const spy = spyOn(directive.ngZone, 'runOutsideAngular');
+      directive.ngAfterViewInit();
+      expect(spy).toHaveBeenCalled();
+
+      spy.calls.reset();
+      directive = new InViewportDirective(el, windowRef, <any>cdRef, zone, ɵPLATFORM_SERVER_ID);
+      directive.ngAfterViewInit();
+
+      expect(spy).not.toHaveBeenCalled();
+    });
   });
 });

src/app/in-viewport/in-viewport.directive.ts

@@ -1,8 +1,9 @@
 import {
   Directive, ElementRef, HostBinding, EventEmitter,
   Input, Output, OnDestroy, AfterViewInit,
-  ChangeDetectorRef, NgZone
+  ChangeDetectorRef, NgZone, PLATFORM_ID, Inject
 } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 import { fromEvent } from 'rxjs/observable/fromEvent';
@@ -136,7 +137,8 @@ export class InViewportDirective implements AfterViewInit, OnDestroy {
     private el: ElementRef,
     private win: WindowRef,
     private cdRef: ChangeDetectorRef,
-    private ngZone: NgZone
+    public ngZone: NgZone,
+    @Inject(PLATFORM_ID) private platformId
   ) { }
   /**
    * Subscribe to `viewport$` observable which
@@ -154,21 +156,23 @@ export class InViewportDirective implements AfterViewInit, OnDestroy {
       .subscribe(() => this.calculateInViewportStatus());
 
     // Listen for window scroll/resize events.
-    this.ngZone.runOutsideAngular(() => {
-      Observable.merge(
-          fromEvent(this.win as any, eventData.eventWindowResize),
-          fromEvent(this.win as any, eventData.eventWindowScroll)
-        )
-        .auditTime(this.debounce)
-        .subscribe(() => this.onViewportChange());
-    });
-
-    if (this.parent) {
+    if (isPlatformBrowser(this.platformId)) {
       this.ngZone.runOutsideAngular(() => {
-        fromEvent(this.parent, eventData.eventScroll)
+        Observable.merge(
+            fromEvent(this.win as any, eventData.eventWindowResize),
+            fromEvent(this.win as any, eventData.eventWindowScroll)
+          )
           .auditTime(this.debounce)
-          .subscribe(() => this.onParentScroll());
+          .subscribe(() => this.onViewportChange());
       });
+
+      if (this.parent) {
+        this.ngZone.runOutsideAngular(() => {
+          fromEvent(this.parent, eventData.eventScroll)
+            .auditTime(this.debounce)
+            .subscribe(() => this.onParentScroll());
+        });
+      }
     }
   }
   /**