fix: handle firebase state transfer better

Author: patrickmichalina

src/modules/firebase/browser.firebase.module.ts

@@ -1,16 +1,30 @@
-import { NgModule } from '@angular/core'
+import {
+  NgModule,
+  ModuleWithProviders,
+  Optional,
+  SkipSelf
+} from '@angular/core'
 import { UniversalRtDbService } from './browser.firebase.rtdb.service'
 
-// export const FIREBASE_USER_AUTH_TOKEN = new InjectionToken<string>(
-//   'fng.fb.svr.usr.auth'
-// )
-
-// export const FIREBASE_DATABASE_URL = new InjectionToken<string>(
-//   'fng.fb.db.url'
-// )
-
 // tslint:disable-next-line:no-class
-@NgModule({
-  providers: [UniversalRtDbService]
-})
-export class FirebaseBrowserModule {}
+@NgModule()
+export class FirebaseBrowserModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: FirebaseBrowserModule,
+      providers: [UniversalRtDbService]
+    }
+  }
+
+  constructor(
+    @Optional()
+    @SkipSelf()
+    parentModule: FirebaseBrowserModule
+  ) {
+    // tslint:disable-next-line:no-if-statement
+    if (parentModule)
+      throw new Error(
+        'FirebaseBrowserModule already loaded. Import in root module only.'
+      )
+  }
+}

src/modules/firebase/server.firebase.rtdb.service.ts

@@ -1,7 +1,7 @@
-import { catchError, take, tap } from 'rxjs/operators'
+import { catchError, take, tap, map } from 'rxjs/operators'
 import { AngularFireDatabase } from 'angularfire2/database'
 import { Inject, Injectable, Optional } from '@angular/core'
-import { HttpClient, HttpParams } from '@angular/common/http'
+import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http'
 import {
   FIREBASE_USER_AUTH_TOKEN,
   LRU_CACHE,
@@ -41,10 +41,14 @@ function mapUndefined(err: any) {
 
 function attemptToCacheInLru(key: string, lru?: LruCache) {
   return function(response?: any) {
-    lru && lru.set(sha256(key), response)
+    lru && response && lru.set(sha256(key), response)
   }
 }
 
+function httpResponseToValue<T>(value: HttpResponse<T>): T | undefined {
+  return (value && value.body) || undefined
+}
+
 function attemptToGetCachedValue<T>(key: string, lru?: LruCache) {
   return lru && lru.get<T>(sha256(key))
 }
@@ -82,13 +86,14 @@ export class ServerUniversalRtDbService implements IUniversalRtdbService {
     const tsKey = makeRtDbStateTransferKey(url)
 
     const baseObs = this.authToken
-      ? this.http.get<T>(url, { params })
-      : this.http.get<T>(url)
+      ? this.http.get<HttpResponse<T>>(url, { params })
+      : this.http.get<HttpResponse<T>>(url)
 
     return cachedValue
       ? of(cachedValue).pipe(tap(writeLruCacheToTransferState(this.ts, tsKey)))
       : baseObs.pipe(
           take(1),
+          map(httpResponseToValue),
           tap(attemptToCacheInLru(cacheKey, this.lru)),
           catchError(mapUndefined)
         )

src/templates/core/browser/app.browser.entry.aot.ts.txt

@@ -1,4 +1,10 @@
 import { platformBrowser } from '@angular/platform-browser'
 import { AppBrowserModuleNgFactory } from './app.browser.module.ngfactory'
 
-platformBrowser().bootstrapModuleFactory(AppBrowserModuleNgFactory)
+function domContentLoadedHandler() {
+  platformBrowser()
+    .bootstrapModuleFactory(AppBrowserModuleNgFactory)
+    .catch(console.log)
+}
+
+document.addEventListener('DOMContentLoaded', domContentLoadedHandler)

src/templates/core/browser/app.browser.entry.jit.ts.txt

@@ -1,4 +1,10 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 import { AppBrowserModule } from './app.browser.module'
 
-platformBrowserDynamic().bootstrapModule(AppBrowserModule)
+function domContentLoadedHandler() {
+  platformBrowserDynamic()
+    .bootstrapModule(AppBrowserModule)
+    .catch(console.log)
+}
+
+document.addEventListener('DOMContentLoaded', domContentLoadedHandler)