fix(): Fixing Zone.js issues (angular#1586)

* fix(): Fixing Zone.js issues

* Trying out only blocking on platformServer

* yarn upgrade

Author: jamesdaniels

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angularfire2",
-  "version": "5.0.0-rc.6",
+  "version": "5.0.0-rc.7.2-next",
   "description": "The official library of Firebase and Angular.",
   "private": true,
   "scripts": {

src/auth/auth.ts

@@ -1,8 +1,7 @@
 import { FirebaseAuth, User } from '@firebase/auth-types';
 import { FirebaseOptions } from '@firebase/app-types';
-import { Injectable, Inject, Optional, NgZone } from '@angular/core';
+import { Injectable, Inject, Optional, NgZone, PLATFORM_ID } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
-import { observeOn } from 'rxjs/operator/observeOn';
 
 import { FirebaseAppConfig, FirebaseAppName, _firebaseAppFactory, FirebaseZoneScheduler } from 'angularfire2';
 
@@ -31,9 +30,10 @@ export class AngularFireAuth {
   constructor(
     @Inject(FirebaseAppConfig) config:FirebaseOptions,
     @Optional() @Inject(FirebaseAppName) name:string,
+    @Inject(PLATFORM_ID) platformId: Object,
     private zone: NgZone
   ) {
-    const scheduler = new FirebaseZoneScheduler(zone);
+    const scheduler = new FirebaseZoneScheduler(zone, platformId);
     this.auth = zone.runOutsideAngular(() => {
       const app = _firebaseAppFactory(config, name);
       return app.auth();

src/core/angularfire2.ts

@@ -1,15 +1,15 @@
 import { InjectionToken, NgZone } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
 import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
 import { queue } from 'rxjs/scheduler/queue';
+import { isPlatformServer } from '@angular/common';
+import { observeOn } from 'rxjs/operator/observeOn';
 
 import firebase from '@firebase/app';
 import { FirebaseApp, FirebaseOptions } from '@firebase/app-types';
 
 import 'zone.js';
 import 'rxjs/add/operator/first';
-import { Subscriber } from 'rxjs/Subscriber';
-import { observeOn } from 'rxjs/operator/observeOn';
 
 export const FirebaseAppName = new InjectionToken<string>('angularfire2.appName');
 export const FirebaseAppConfig = new InjectionToken<FirebaseOptions>('angularfire2.config');
@@ -18,25 +18,32 @@ export const FirebaseAppConfig = new InjectionToken<FirebaseOptions>('angularfir
 export const RealtimeDatabaseURL = new InjectionToken<string>('angularfire2.realtimeDatabaseURL');
 
 export class FirebaseZoneScheduler {
-  constructor(public zone: NgZone) {}
+  constructor(public zone: NgZone, private platformId: Object) {}
   schedule(...args: any[]): Subscription {
     return <Subscription>this.zone.runGuarded(function() { return queue.schedule.apply(queue, args)});
   }
   // TODO this is a hack, clean it up
   keepUnstableUntilFirst<T>(obs$: Observable<T>) {
-    return new Observable<T>(subscriber => {
-      const noop = () => {};
-      const task = Zone.current.scheduleMacroTask('firebaseZoneBlock', noop, {}, noop, noop);
-      obs$.first().subscribe(() => this.zone.runOutsideAngular(() => task.invoke()));
-      return obs$.subscribe(subscriber);
-    });
+    if (isPlatformServer(this.platformId)) {
+      return new Observable<T>(subscriber => {
+        const noop = () => {};
+        const task = Zone.current.scheduleMacroTask('firebaseZoneBlock', noop, {}, noop, noop);
+        obs$.first().subscribe(() => this.zone.runOutsideAngular(() => task.invoke()));
+        return obs$.subscribe(subscriber);
+      });
+    } else {
+      return obs$;
+    }
   }
   runOutsideAngular<T>(obs$: Observable<T>): Observable<T> {
-    const outsideAngular = new Observable<T>(subscriber => {
+    return new Observable<T>(subscriber => {
       return this.zone.runOutsideAngular(() => {
-        return obs$.subscribe(subscriber);
+        return obs$.subscribe(
+          value => this.zone.run(() => subscriber.next(value)),
+          error => this.zone.run(() => subscriber.error(error)),
+          ()    => this.zone.run(() => subscriber.complete()),
+        );
       });
     });
-    return observeOn.call(outsideAngular, this);
   }
 }

src/database-deprecated/firebase_list_factory.ts

@@ -187,7 +187,7 @@ function firebaseListObservable(ref: database.Reference | DatabaseQuery, {preser
   });
 
   // TODO: should be in the subscription zone instead
-  return observeOn.call(listObs, new FirebaseZoneScheduler(new NgZone({})));
+  return observeOn.call(listObs, new FirebaseZoneScheduler(new NgZone({}), {}));
 
 }
 

src/database-deprecated/firebase_object_factory.ts

@@ -22,5 +22,5 @@ export function FirebaseObjectFactory (
   }, ref);
 
   // TODO: should be in the subscription zone instead
-  return observeOn.call(objectObservable, new FirebaseZoneScheduler(new NgZone({})));
+  return observeOn.call(objectObservable, new FirebaseZoneScheduler(new NgZone({}), {}));
 }

src/database/database.spec.ts

@@ -42,7 +42,7 @@ describe('AngularFireDatabase', () => {
     });
 
     it('should accept a Firebase App in the constructor', () => {
-      const __db = new AngularFireDatabase(app.options, app.name, null!, zone);
+      const __db = new AngularFireDatabase(app.options, app.name, null!, {}, zone);
       expect(__db instanceof AngularFireDatabase).toEqual(true);
     });
 

src/database/database.ts

@@ -1,4 +1,4 @@
-import { Injectable, Inject, Optional, NgZone } from '@angular/core';
+import { Injectable, Inject, Optional, NgZone, PLATFORM_ID } from '@angular/core';
 import { FirebaseDatabase } from '@firebase/database-types';
 import { PathReference, DatabaseQuery, DatabaseReference, DatabaseSnapshot, ChildEvent, ListenEvent, QueryFn, AngularFireList, AngularFireObject } from './interfaces';
 import { getRef } from './utils';
@@ -17,9 +17,10 @@ export class AngularFireDatabase {
     @Inject(FirebaseAppConfig) config:FirebaseOptions,
     @Optional() @Inject(FirebaseAppName) name:string,
     @Optional() @Inject(RealtimeDatabaseURL) databaseURL:string,
+    @Inject(PLATFORM_ID) platformId: Object,
     zone: NgZone
   ) {
-    this.scheduler = new FirebaseZoneScheduler(zone);
+    this.scheduler = new FirebaseZoneScheduler(zone, platformId);
     this.database = zone.runOutsideAngular(() => {
       const app = _firebaseAppFactory(config, name);
       return app.database(databaseURL || undefined);

src/database/list/audit-trail.ts

@@ -10,7 +10,11 @@ import 'rxjs/add/operator/withLatestFrom';
 import 'rxjs/add/operator/map';
 
 export function createAuditTrail(query: DatabaseQuery, afDatabase: AngularFireDatabase) {
-  return (events?: ChildEvent[]) => afDatabase.scheduler.keepUnstableUntilFirst(auditTrail(query, events));
+  return (events?: ChildEvent[]) => afDatabase.scheduler.keepUnstableUntilFirst(
+    afDatabase.scheduler.runOutsideAngular(
+      auditTrail(query, events)
+    )
+  );
 }
 
 export function auditTrail(query: DatabaseQuery, events?: ChildEvent[]): Observable<SnapshotAction[]> {

src/database/list/create-reference.ts

@@ -15,14 +15,21 @@ export function createListReference<T>(query: DatabaseQuery, afDatabase: Angular
     remove: createRemoveMethod(query.ref),
     snapshotChanges(events?: ChildEvent[]) {
       const snapshotChanges$ = snapshotChanges(query, events);
-      return afDatabase.scheduler.keepUnstableUntilFirst(snapshotChanges$);
+      return afDatabase.scheduler.keepUnstableUntilFirst(
+        afDatabase.scheduler.runOutsideAngular(
+          snapshotChanges$
+        )
+      );
     },
     stateChanges: createStateChanges(query, afDatabase),
     auditTrail: createAuditTrail(query, afDatabase),
     valueChanges<T>(events?: ChildEvent[]) { 
       const snapshotChanges$ = snapshotChanges(query, events);
-      return afDatabase.scheduler.keepUnstableUntilFirst(snapshotChanges$)
-        .map(actions => actions.map(a => a.payload.val())); 
+      return afDatabase.scheduler.keepUnstableUntilFirst(
+        afDatabase.scheduler.runOutsideAngular(
+          snapshotChanges$
+        )
+      ).map(actions => actions.map(a => a.payload.val()));
     }
   }
 }

src/database/list/state-changes.ts

@@ -8,7 +8,11 @@ import { DataSnapshot } from '@firebase/database-types';
 import { AngularFireDatabase } from '../database';
 
 export function createStateChanges(query: DatabaseQuery, afDatabase: AngularFireDatabase) {
-  return (events?: ChildEvent[]) => afDatabase.scheduler.keepUnstableUntilFirst(stateChanges(query, events));
+  return (events?: ChildEvent[]) => afDatabase.scheduler.keepUnstableUntilFirst(
+    afDatabase.scheduler.runOutsideAngular(
+      stateChanges(query, events)
+    )
+  );
 }
 
 export function stateChanges(query: DatabaseQuery, events?: ChildEvent[]) {