fix(database): fix Zone.js issues by running ref-gen outside angular

Author: jamesdaniels

sample/src/app/database/database.component.ts

@@ -21,7 +21,6 @@ export class DatabaseComponent implements OnInit {
   public readonly testObjectValue$: Observable<any>;
 
   constructor(state: TransferState, database: AngularFireDatabase, @Inject(PLATFORM_ID) platformId: object) {
-    // TODO fix the Zone.js issue with AngularFireDatabase
     if (isPlatformServer(platformId)) {
       this.testObjectValue$ = EMPTY;
     } else {

sample/src/app/home/home.component.ts

@@ -6,7 +6,7 @@ import { FirebaseApp } from '@angular/fire';
   template: `
     Hello world!
     {{ firebaseApp.name }}
-    <!-- TODO wrap the Zone issue <app-database></app-database> -->
+    <app-database></app-database>
     <app-firestore></app-firestore>
     <app-firestore-offline></app-firestore-offline>
     <app-storage></app-storage>

src/database/database.ts

@@ -65,7 +65,7 @@ export class AngularFireDatabase {
   }
 
   list<T>(pathOrRef: PathReference, queryFn?: QueryFn): AngularFireList<T> {
-    const ref = getRef(this.database, pathOrRef);
+    const ref = this.schedulers.ngZone.runOutsideAngular(() => getRef(this.database, pathOrRef));
     let query: DatabaseQuery = ref;
     if (queryFn) {
       query = queryFn(ref);
@@ -74,12 +74,13 @@ export class AngularFireDatabase {
   }
 
   object<T>(pathOrRef: PathReference): AngularFireObject<T> {
-    const ref = getRef(this.database, pathOrRef);
+    const ref = this.schedulers.ngZone.runOutsideAngular(() => getRef(this.database, pathOrRef));
     return createObjectReference<T>(ref, this);
   }
 
   createPushId() {
-    return this.database.ref().push().key;
+    const ref = this.schedulers.ngZone.runOutsideAngular(() => this.database.ref());
+    return ref.push().key;
   }
 
 }