Adding emulators to samples, clean up, stop onMessage from destablizi…

…ng zone
angular · jamesdaniels · Aug 30, 2021 · Aug 30, 2021 · Aug 30, 2021 · Aug 30, 2021
commit f2191cec62df3bbdf0ceb701fa5dd9f33792e1b7
diff --git a/sample-compat/firebase.json b/sample-compat/firebase.json
@@ -52,6 +52,9 @@
     "auth": {
       "port": 9099
     },
+    "storage": {
+      "port": 9199
+    },
     "ui": {
       "enabled": true
     }

diff --git a/sample-compat/package.json b/sample-compat/package.json
@@ -33,10 +33,10 @@
     "@nguniversal/express-engine": "12.1.0",
     "core-js": "^3.6.5",
     "cross-fetch": "^3.1.4",
-    "firebase": "9.0.0-202172505352",
+    "firebase": "^9.0.0",
     "first-input-delay": "^0.1.3",
     "proxy-polyfill": "^0.3.2",
-    "rxfire": "6.0.0-rc.1",
+    "rxfire": "^6.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
     "whatwg-fetch": "^3.4.1",

diff --git a/sample-compat/src/app/app.module.ts b/sample-compat/src/app/app.module.ts
@@ -21,7 +21,7 @@ import {
 import { FirestoreComponent } from './firestore/firestore.component';
 import { AngularFireDatabaseModule, USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/compat/database';
 import { AngularFirestoreModule, USE_EMULATOR as USE_FIRESTORE_EMULATOR, SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/compat/firestore';
-import { AngularFireStorageModule } from '@angular/fire/compat/storage';
+import { AngularFireStorageModule, USE_EMULATOR as USE_STORAGE_EMULATOR } from '@angular/fire/compat/storage';
 import { AngularFireAuthModule, USE_DEVICE_LANGUAGE, USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/compat/auth';
 import { AngularFireMessagingModule, SERVICE_WORKER, VAPID_KEY } from '@angular/fire/compat/messaging';
 import { AngularFireFunctionsModule, USE_EMULATOR as USE_FUNCTIONS_EMULATOR, ORIGIN as FUNCTIONS_ORIGIN } from '@angular/fire/compat/functions';
@@ -78,19 +78,19 @@ import { UpboatsComponent } from './upboats/upboats.component';
     { provide: FIRESTORE_SETTINGS, useValue: { ignoreUndefinedProperties: true } },
     { provide: ANALYTICS_DEBUG_MODE, useValue: true },
     { provide: COLLECTION_ENABLED, useValue: true },
-    { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9099] : undefined },
+    { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['localhost:9099'] : undefined },
     { provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9000] : undefined },
     { provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 8080] : undefined },
     { provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? ['localhost', 5001] : undefined },
+    { provide: USE_STORAGE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9199] : undefined },
     { provide: FUNCTIONS_ORIGIN, useFactory: () => isDevMode() || typeof location === 'undefined' ? undefined : location.origin },
     { provide: REMOTE_CONFIG_SETTINGS, useFactory: () => isDevMode() ? { minimumFetchIntervalMillis: 10_000 } : {} },
     { provide: REMOTE_CONFIG_DEFAULTS, useValue: { background_color: 'red' } },
     { provide: USE_DEVICE_LANGUAGE, useValue: true },
     { provide: VAPID_KEY, useValue: environment.vapidKey },
-    { provide: SERVICE_WORKER, useFactory: () => typeof navigator !== 'undefined' && navigator.serviceWorker?.getRegistration('firebase-messaging-sw.js') || undefined },
+    { provide: SERVICE_WORKER, useFactory: () => typeof navigator !== 'undefined' && navigator.serviceWorker?.register('firebase-messaging-sw.js') || undefined },
     { provide: APP_VERSION, useValue: '0.0.0' },
     { provide: APP_NAME, useValue: 'Angular' },
-    { provide: APP_INITIALIZER, useValue: () => typeof navigator !== 'undefined' && navigator.serviceWorker?.register('firebase-messaging-sw.js').catch(() => undefined) || Promise.resolve(), multi: true },
   ],
   bootstrap: [AppComponent]
 })

diff --git a/sample-compat/yarn.lock b/sample-compat/yarn.lock
diff --git a/sample/package.json b/sample/package.json
@@ -28,12 +28,12 @@
     "@angular/platform-server": "^12.0.0",
     "@angular/router": "^12.0.0",
     "@angular/service-worker": "^12.0.0",
-    "@nguniversal/express-engine": "12.1.0",
+    "@nguniversal/express-engine": "^12.1.0",
     "cross-fetch": "^3.1.4",
     "express": "^4.15.2",
-    "firebase": "9.0.0-2021724205917",
+    "firebase": "^9.0.0",
     "lodash.isequal": "^4.5.0",
-    "rxfire": "6.0.0-rc.1",
+    "rxfire": "^6.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
     "ws": "^8.2.0",

diff --git a/sample/src/app/app.browser.module.ts b/sample/src/app/app.browser.module.ts
@@ -3,7 +3,6 @@ import { getRemoteConfig, provideRemoteConfig } from '@angular/fire/remote-confi
 import { getAnalytics, provideAnalytics } from '@angular/fire/analytics';
 import { getMessaging, provideMessaging } from '@angular/fire/messaging';
 import { getPerformance, providePerformance } from '@angular/fire/performance';
-import { getFunctions, provideFunctions } from '@angular/fire/functions';
 
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
@@ -17,7 +16,6 @@ import { environment } from '../environments/environment';
     provideAnalytics(() => getAnalytics()),
     provideMessaging(() => getMessaging()),
     providePerformance(() => getPerformance()),
-    provideFunctions(() => getFunctions()),
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: environment.production,
       registrationStrategy: 'registerWhenStable:30000'

diff --git a/sample/src/app/app.component.ts b/sample/src/app/app.component.ts
@@ -1,18 +1,10 @@
 import { ApplicationRef, Component, Optional } from '@angular/core';
-import { FirebaseApp, FirebaseApps } from '@angular/fire/app';
-import { Auth, AuthInstances, authState } from '@angular/fire/auth';
-import { Firestore as FirestoreLite, FirestoreInstances as FirestoreLiteInstances } from '@angular/fire/firestore/lite';
-import { Firestore, FirestoreInstances, getDoc, doc, DocumentSnapshot } from '@angular/fire/firestore';
+import { Auth, authState } from '@angular/fire/auth';
+import { Firestore, getDoc, doc, DocumentSnapshot } from '@angular/fire/firestore';
 import { DocumentData } from 'rxfire/firestore/lite/interfaces';
 import { distinctUntilChanged } from 'rxjs/operators';
-import { Storage, StorageInstances } from '@angular/fire/storage';
-import { Messaging, MessagingInstances, onMessage } from '@angular/fire/messaging';
-import { RemoteConfig, RemoteConfigInstances } from '@angular/fire/remote-config';
-import { Functions, FunctionsInstances } from '@angular/fire/functions';
-import { Database, DatabaseInstances } from '@angular/fire/database';
-import { Analytics, AnalyticsInstances } from '@angular/fire/analytics';
-import { Performance, PerformanceInstances } from '@angular/fire/performance';
-import { getToken } from 'firebase/messaging';
+import { Messaging, onMessage } from '@angular/fire/messaging';
+import { getToken } from '@angular/fire/messaging';
 
 import { environment } from '../environments/environment';
 
@@ -28,46 +20,22 @@ export class AppComponent {
   myDocData: Promise<DocumentSnapshot<DocumentData>>;
   title = 'sample';
   constructor(
-    app: FirebaseApp, // default Firebase App
-    auth: Auth, // default Firbase Auth
-    apps: FirebaseApps, // all initialized App instances
-    authInstances: AuthInstances, // all initialized Auth instances
-    @Optional() firestoreLite: FirestoreLite,
-    @Optional() firestoreLiteInstances: FirestoreLiteInstances,
-    @Optional() firestore: Firestore,
-    @Optional() firestoreInstances: FirestoreInstances,
-    storage: Storage,
-    storageInstances: StorageInstances,
-    @Optional() messaging: Messaging,
-    @Optional() messagingInstances: MessagingInstances,
-    @Optional() remoteConfig: RemoteConfig,
-    @Optional() remoteConfigInstances: RemoteConfigInstances,
-    @Optional() functions: Functions,
-    @Optional() functionsInstances: FunctionsInstances,
-    database: Database,
-    databaseInstances: DatabaseInstances,
-    @Optional() analytics: Analytics,
-    @Optional() analyticsInstances: AnalyticsInstances,
-    @Optional() performance: Performance,
-    @Optional() performanceInstances: PerformanceInstances,
     appRef: ApplicationRef,
+    auth: Auth,
+    firestore: Firestore,
+    @Optional() messaging: Messaging,
   ) {
-    console.log({
-      app, auth, apps, authInstances, firestore, firestoreInstances,
-      firestoreLite, firestoreLiteInstances, storage, storageInstances,
-      messaging, messagingInstances, performance, performanceInstances,
-      analytics, analyticsInstances, functions, functionsInstances, database,
-      databaseInstances, remoteConfig, remoteConfigInstances
-    });
     authState(auth).subscribe(it => console.log('authState', it));
     appRef.isStable.pipe(distinctUntilChanged()).subscribe(it => console.log('isStable', it));
     this.myDocData = getDoc(doc(firestore, 'animals/NJdGQCv1P92SWsp4nSE7'));
-    navigator.serviceWorker.register('firebase-messaging-sw.js', { type: 'module' }).then(serviceWorkerRegistration => {
-      getToken(messaging, {
-        serviceWorkerRegistration,
-        vapidKey: environment.vapidKey,
-      }).then(it => console.log(it));
-    });
-    onMessage(messaging, it => console.log('onMessage', it));
+    if (messaging) {
+      navigator.serviceWorker.register('firebase-messaging-sw.js', { type: 'module' }).then(serviceWorkerRegistration => {
+        getToken(messaging, {
+          serviceWorkerRegistration,
+          vapidKey: environment.vapidKey,
+        }).then(it => console.log(it));
+      });
+      onMessage(messaging, it => console.log('onMessage', it));
+    }
   }
 }
diff --git a/sample/src/app/app.module.ts b/sample/src/app/app.module.ts
@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
-import { provideAuth, initializeAuth } from '@angular/fire/auth';
-import { getStorage, provideStorage } from '@angular/fire/storage';
-import { getDatabase, provideDatabase } from '@angular/fire/database';
-import { getFirestore, provideFirestore } from '@angular/fire/firestore';
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
+import { getStorage, provideStorage, connectStorageEmulator } from '@angular/fire/storage';
+import { getDatabase, provideDatabase, connectDatabaseEmulator } from '@angular/fire/database';
+import { getFirestore, provideFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
+import { getFunctions, provideFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -26,10 +27,41 @@ import { environment } from '../environments/environment';
       app.automaticDataCollectionEnabled = false;
       return app;
     }),
-    provideAuth(() => initializeAuth(getApp())),
-    provideDatabase(() => getDatabase()),
-    provideStorage(() => getStorage()),
-    provideFirestore(() => getFirestore()),
+    provideAuth(() => {
+      const auth = getAuth();
+      if (environment.useEmulators) {
+        connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true });
+      }
+      return auth;
+    }),
+    provideDatabase(() => {
+      const database = getDatabase();
+      if (environment.useEmulators) {
+        connectDatabaseEmulator(database, 'localhost', 9000);
+      }
+      return database;
+    }),
+    provideStorage(() => {
+      const storage = getStorage();
+      if (environment.useEmulators) {
+        connectStorageEmulator(storage, 'localhost', 9199);
+      }
+      return storage; 
+    }),
+    provideFunctions(() => {
+      const functions = getFunctions();
+      if (environment.useEmulators) {
+        connectFunctionsEmulator(functions, 'localhost', 5001);
+      }
+      return functions;
+    }),
+    provideFirestore(() => {
+      const firestore = getFirestore();
+      if (environment.useEmulators) {
+        connectFirestoreEmulator(firestore, 'localhost', 8080);
+      }
+      return firestore;
+    }),
   ],
   providers: [ ],
   bootstrap: [ ],