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

jamesdaniels · davideast · commit be58c6b005a7 · 2018-05-04T09:41:14.000-06:00
* fix(): Fixing Zone.js issues

* Trying out only blocking on platformServer

* yarn upgrade
diff --git a/package.json b/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": {
diff --git a/src/auth/auth.ts b/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();
diff --git a/src/core/angularfire2.ts b/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);
   }
 }
diff --git a/src/database-deprecated/firebase_list_factory.ts b/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({}), {}));
 
 }
 
diff --git a/src/database-deprecated/firebase_object_factory.ts b/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({}), {}));
 }
diff --git a/src/database/database.spec.ts b/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);
     });
 
diff --git a/src/database/database.ts b/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);
diff --git a/src/database/list/audit-trail.ts b/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[]> {
diff --git a/src/database/list/create-reference.ts b/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()));
     }
   }
 }
diff --git a/src/database/list/state-changes.ts b/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[]) {
diff --git a/src/database/object/create-reference.ts b/src/database/object/create-reference.ts
@@ -7,15 +7,22 @@ export function createObjectReference<T>(query: DatabaseQuery, afDatabase: Angul
     query,
     snapshotChanges<T>() {
       const snapshotChanges$ = createObjectSnapshotChanges(query)();
-      return afDatabase.scheduler.keepUnstableUntilFirst(snapshotChanges$);
+      return afDatabase.scheduler.keepUnstableUntilFirst(
+        afDatabase.scheduler.runOutsideAngular(
+          snapshotChanges$
+        )
+      );
     },
     update(data: Partial<T>) { return query.ref.update(data as any) as Promise<void>; },
     set(data: T) { return query.ref.set(data) as Promise<void>; },
     remove() { return query.ref.remove() as Promise<void>; },
     valueChanges<T>() { 
       const snapshotChanges$ = createObjectSnapshotChanges(query)();
-      return afDatabase.scheduler.keepUnstableUntilFirst(snapshotChanges$)
-        .map(action => action.payload.exists() ? action.payload.val() as T : null)
+      return afDatabase.scheduler.keepUnstableUntilFirst(
+        afDatabase.scheduler.runOutsideAngular(
+          snapshotChanges$
+        )
+      ).map(action => action.payload.exists() ? action.payload.val() as T : null)
     },
   }
 }
diff --git a/src/database/observable/fromRef.ts b/src/database/observable/fromRef.ts
@@ -1,6 +1,5 @@
 import { DatabaseQuery, DatabaseSnapshot, ListenEvent, AngularFireAction } from '../interfaces';
 import { Observable } from 'rxjs/Observable';
-import { observeOn } from 'rxjs/operator/observeOn';
 import { FirebaseZoneScheduler } from 'angularfire2';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/delay';
diff --git a/src/firestore/collection/collection.ts b/src/firestore/collection/collection.ts
@@ -12,8 +12,6 @@ import { docChanges, sortedChanges } from './changes';
 import { AngularFirestoreDocument } from '../document/document';
 import { AngularFirestore } from '../firestore';
 
-import { observeOn } from 'rxjs/operator/observeOn';
-
 import 'rxjs/add/observable/of';
 
 export function validateEventsArray(events?: DocumentChangeType[]) {
@@ -70,11 +68,19 @@ export class AngularFirestoreCollection<T> {
    */
   stateChanges(events?: DocumentChangeType[]): Observable<DocumentChangeAction[]> {
     if(!events || events.length === 0) {
-      return docChanges(this.query);
+      return this.afs.scheduler.keepUnstableUntilFirst(
+        this.afs.scheduler.runOutsideAngular(
+          docChanges(this.query)
+        )
+      );
     }
-    return this.afs.scheduler.keepUnstableUntilFirst(docChanges(this.query)
+    return this.afs.scheduler.keepUnstableUntilFirst(
+        this.afs.scheduler.runOutsideAngular(
+          docChanges(this.query)
+        )
+      )
       .map(actions => actions.filter(change => events.indexOf(change.type) > -1))
-      .filter(changes =>  changes.length > 0));
+      .filter(changes =>  changes.length > 0);
   }
 
   /**
diff --git a/src/firestore/firestore.ts b/src/firestore/firestore.ts
@@ -1,4 +1,4 @@
-import { InjectionToken, NgZone } from '@angular/core';
+import { InjectionToken, NgZone, PLATFORM_ID } from '@angular/core';
 import { FirebaseFirestore, CollectionReference, DocumentReference } from '@firebase/firestore-types';
 
 import { Observable } from 'rxjs/Observable';
@@ -112,9 +112,10 @@ export class AngularFirestore {
     @Inject(FirebaseAppConfig) config:FirebaseOptions,
     @Optional() @Inject(FirebaseAppName) name:string,
     @Optional() @Inject(EnablePersistenceToken) shouldEnablePersistence: boolean,
+    @Inject(PLATFORM_ID) platformId: Object,
     zone: NgZone
   ) {
-    this.scheduler = new FirebaseZoneScheduler(zone);
+    this.scheduler = new FirebaseZoneScheduler(zone, platformId);
     this.firestore = zone.runOutsideAngular(() => {
       const app = _firebaseAppFactory(config, name);
       return app.firestore();
diff --git a/src/storage/storage.ts b/src/storage/storage.ts
@@ -1,4 +1,4 @@
-import { Injectable, Inject, Optional, InjectionToken, NgZone } from '@angular/core';
+import { Injectable, Inject, Optional, InjectionToken, NgZone, PLATFORM_ID } from '@angular/core';
 import { FirebaseStorage, UploadMetadata } from '@firebase/storage-types';
 import { createStorageRef, AngularFireStorageReference } from './ref';
 import { createUploadTask, AngularFireUploadTask } from './task';
@@ -24,9 +24,10 @@ export class AngularFireStorage {
     @Inject(FirebaseAppConfig) config:FirebaseOptions,
     @Optional() @Inject(FirebaseAppName) name:string,
     @Optional() @Inject(StorageBucket) storageBucket:string,
+    @Inject(PLATFORM_ID) platformId: Object,
     zone: NgZone
   ) {
-    this.scheduler = new FirebaseZoneScheduler(zone);
+    this.scheduler = new FirebaseZoneScheduler(zone, platformId);
     this.storage = zone.runOutsideAngular(() => {
       const app = _firebaseAppFactory(config, name);
       return app.storage(storageBucket || undefined);
diff --git a/tools/build.js b/tools/build.js
@@ -54,6 +54,7 @@ const GLOBALS = {
   'rxjs/observable/from': 'Rx.Observable',
   'rxjs/operator': 'Rx.Observable.prototype',
   '@angular/core': 'ng.core',
+  '@angular/common': 'ng.common',
   '@angular/compiler': 'ng.compiler',
   '@angular/platform-browser': 'ng.platformBrowser',
   'firebase/auth': 'firebase',
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "angularfire2",`
`3`		`- "version": "5.0.0-rc.6",`
	`3`	`+ "version": "5.0.0-rc.7.2-next",`
`4`	`4`	`"description": "The official library of Firebase and Angular.",`
`5`	`5`	`"private": true,`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -187,7 +187,7 @@ function firebaseListObservable(ref: database.Reference \| DatabaseQuery, {preser`
`187`	`187`	`});`
`188`	`188`
`189`	`189`	`// TODO: should be in the subscription zone instead`
`190`		`- return observeOn.call(listObs, new FirebaseZoneScheduler(new NgZone({})));`
	`190`	`+ return observeOn.call(listObs, new FirebaseZoneScheduler(new NgZone({}), {}));`
`191`	`191`
`192`	`192`	`}`
`193`	`193`
Original file line number	Diff line number	Diff line change
`@@ -22,5 +22,5 @@ export function FirebaseObjectFactory (`
`22`	`22`	`}, ref);`
`23`	`23`
`24`	`24`	`// TODO: should be in the subscription zone instead`
`25`		`- return observeOn.call(objectObservable, new FirebaseZoneScheduler(new NgZone({})));`
	`25`	`+ return observeOn.call(objectObservable, new FirebaseZoneScheduler(new NgZone({}), {}));`
`26`	`26`	`}`