fix(storage): Add our zone wrappers for download url and meta-data (#1548)

Author: jamesdaniels

src/storage/ref.ts

@@ -2,6 +2,7 @@ import { SettableMetadata, UploadMetadata, Reference, StringFormat } from '@fire
 import { createUploadTask, AngularFireUploadTask } from './task';
 import { Observable } from 'rxjs/Observable';
 import { from } from 'rxjs/observable/from';
+import { FirebaseZoneScheduler } from 'angularfire2';
 
 export interface AngularFireStorageReference {
   getDownloadURL(): Observable<any>;
@@ -18,12 +19,20 @@ export interface AngularFireStorageReference {
  * creates observable methods from promise based methods.
  * @param ref
  */
-export function createStorageRef(ref: Reference): AngularFireStorageReference {
+export function createStorageRef(ref: Reference, scheduler: FirebaseZoneScheduler): AngularFireStorageReference {
   return {
-    getDownloadURL: () => from(ref.getDownloadURL()),
-    getMetadata: () => from(ref.getMetadata()),
+    getDownloadURL: () => scheduler.keepUnstableUntilFirst(
+      scheduler.runOutsideAngular(
+        from(ref.getDownloadURL())
+      )
+    ),
+    getMetadata: () => scheduler.keepUnstableUntilFirst(
+      scheduler.runOutsideAngular(
+        from(ref.getMetadata())
+      )
+    ),
     delete: () => from(ref.delete()),
-    child: (path: string) => createStorageRef(ref.child(path)),
+    child: (path: string) => createStorageRef(ref.child(path), scheduler),
     updateMetatdata: (meta: SettableMetadata) => from(ref.updateMetadata(meta)),
     put: (data: any, metadata?: UploadMetadata) => {
       const task = ref.put(data, metadata);

src/storage/storage.ts

@@ -3,7 +3,7 @@ import { FirebaseStorage, UploadMetadata } from '@firebase/storage-types';
 import { createStorageRef, AngularFireStorageReference } from './ref';
 import { createUploadTask, AngularFireUploadTask } from './task';
 import { Observable } from 'rxjs/Observable';
-import { FirebaseAppConfig, FirebaseAppName, _firebaseAppFactory } from 'angularfire2';
+import { FirebaseAppConfig, FirebaseAppName, FirebaseZoneScheduler, _firebaseAppFactory } from 'angularfire2';
 import { FirebaseOptions } from '@firebase/app-types';
 
 export const StorageBucket = new InjectionToken<string>('angularfire2.storageBucket');
@@ -18,26 +18,28 @@ export const StorageBucket = new InjectionToken<string>('angularfire2.storageBuc
 @Injectable()
 export class AngularFireStorage {
   public readonly storage: FirebaseStorage;
+  public readonly scheduler: FirebaseZoneScheduler;
 
   constructor(
     @Inject(FirebaseAppConfig) config:FirebaseOptions,
     @Optional() @Inject(FirebaseAppName) name:string,
     @Optional() @Inject(StorageBucket) storageBucket:string,
     zone: NgZone
   ) {
+    this.scheduler = new FirebaseZoneScheduler(zone);
     this.storage = zone.runOutsideAngular(() => {
       const app = _firebaseAppFactory(config, name);
       return app.storage(storageBucket || undefined);
     });
   }
 
   ref(path: string) {
-    return createStorageRef(this.storage.ref(path));
+    return createStorageRef(this.storage.ref(path), this.scheduler);
   }
 
   upload(path: string, data: any, metadata?: UploadMetadata) {
     const storageRef = this.storage.ref(path);
-    const ref = createStorageRef(storageRef);
+    const ref = createStorageRef(storageRef, this.scheduler);
     return ref.put(data, metadata);
   }