feat(core): Firestore-memory and Firestore/Storage/Database-lazy entries

sample/angular.json

@@ -129,7 +129,13 @@
             "main": "server.ts",
             "tsConfig": "tsconfig.server.json",
             "bundleDependencies": true,
-            "externalDependencies": [ ]
+            "externalDependencies": [ ],
+            "fileReplacements": [
+              {
+                "replace": "src/firestore.ts",
+                "with": "src/firestore.server.ts"
+              }
+            ]
           },
           "configurations": {
             "production": {
@@ -138,6 +144,10 @@
                 {
                   "replace": "src/environments/environment.ts",
                   "with": "src/environments/environment.prod.ts"
+                },
+                {
+                  "replace": "src/firestore.ts",
+                  "with": "src/firestore.server.ts"
                 }
               ],
               "sourceMap": false,

sample/package.json

@@ -32,6 +32,7 @@
     "core-js": "^3.6.5",
     "firebase": "^8.0.0",
     "first-input-delay": "^0.1.3",
+    "preboot": "^7.0.0",
     "proxy-polyfill": "^0.3.2",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.1",
@@ -46,6 +47,8 @@
     "@angular/language-service": "~11.0.0",
     "@firebase/app-types": "^0.6.1",
     "@nguniversal/builders": "^10.1.0",
+    "@types/express": "^4.17.9",
+    "@types/express-serve-static-core": "^4.17.14",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "codelyzer": "^6.0.0",

sample/server.ts

@@ -34,9 +34,10 @@ export function app() {
   // Example Express Rest API endpoints
   // app.get('/api/**', (req, res) => { });
   // Serve static files from /browser
+  // TODO sort out why the types broke, express?
   server.get('*.*', express.static(distFolder, {
     maxAge: '1y'
-  }));
+  }) as any);
 
   // All regular routes use the Universal engine
   server.get('*', (req, res) => {

sample/src/app/app-routing.module.ts

@@ -6,9 +6,10 @@ import { AngularFireAuthGuard, canActivate, isNotAnonymous } from '@angular/fire
 import { SecondaryComponent } from './secondary/secondary.component';
 
 const routes: Routes = [
-  { path: '', component: HomeComponent, outlet: 'primary', pathMatch: 'prefix' },
-  { path: '', component: SecondaryComponent, outlet: 'secondary', pathMatch: 'prefix' },
-  { path: '', component: SecondaryComponent, outlet: 'tertiary', pathMatch: 'prefix' },
+  { path: '', component: HomeComponent, outlet: 'primary' },
+  { path: '', component: SecondaryComponent, outlet: 'secondary' },
+  { path: '', component: SecondaryComponent, outlet: 'tertiary' },
+  { path: 'index.html', component: HomeComponent, outlet: 'primary', pathMatch: 'full' },
   { path: 'protected', component: ProtectedComponent, canActivate: [AngularFireAuthGuard] },
   { path: 'lazy', loadChildren: () => import('./protected-lazy/protected-lazy.module').then(m => m.ProtectedLazyModule) },
   { path: 'protected-lazy',

sample/src/app/app.browser.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+import { AngularFirestoreModule } from '@angular/fire/firestore-lazy';
+
+@NgModule({
+  imports: [
+    AppModule,
+    AngularFirestoreModule.enablePersistence({
+        synchronizeTabs: true
+    })
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppBrowserModule {}

sample/src/app/app.component.ts

@@ -1,5 +1,6 @@
-import { ApplicationRef, Component } from '@angular/core';
+import { ApplicationRef, Component, Inject, isDevMode, Optional } from '@angular/core';
 import { FirebaseApp } from '@angular/fire';
+import { RESPONSE } from '@nguniversal/express-engine/tokens';
 import { debounceTime } from 'rxjs/operators';
 
 @Component({
@@ -25,7 +26,12 @@ import { debounceTime } from 'rxjs/operators';
   styles: [``]
 })
 export class AppComponent {
-  constructor(public readonly firebaseApp: FirebaseApp, appRef: ApplicationRef) {
-    appRef.isStable.pipe(debounceTime(200)).subscribe(it => console.log('isStable', it));
+  constructor(public readonly firebaseApp: FirebaseApp, appRef: ApplicationRef, @Optional() @Inject(RESPONSE) response: any) {
+    if (isDevMode()) {
+      appRef.isStable.pipe(debounceTime(200)).subscribe(it => console.log('isStable', it));
+    }
+    if (response) {
+      response.setHeader('Cache-Control', 'public, max-age=600');
+    }
   }
 }

sample/src/app/app.module.ts

@@ -19,9 +19,9 @@ import {
 } from '@angular/fire/analytics';
 
 import { FirestoreComponent } from './firestore/firestore.component';
-import { AngularFireDatabaseModule, USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/database';
-import { AngularFirestoreModule, USE_EMULATOR as USE_FIRESTORE_EMULATOR, SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/firestore';
-import { AngularFireStorageModule } from '@angular/fire/storage';
+import { AngularFireDatabaseModule, USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/database-lazy';
+import { USE_EMULATOR as USE_FIRESTORE_EMULATOR, SETTINGS as FIRESTORE_SETTINGS } from '../firestore';
+import { AngularFireStorageModule } from '@angular/fire/storage-lazy';
 import { AngularFireAuthModule, USE_DEVICE_LANGUAGE, USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/auth';
 import { AngularFireMessagingModule, SERVICE_WORKER, VAPID_KEY } from '@angular/fire/messaging';
 import { AngularFireFunctionsModule, USE_EMULATOR as USE_FUNCTIONS_EMULATOR, ORIGIN as FUNCTIONS_ORIGIN, NEW_ORIGIN_BEHAVIOR } from '@angular/fire/functions';
@@ -35,16 +35,13 @@ import { HomeComponent } from './home/home.component';
 import { AuthComponent } from './auth/auth.component';
 import { MessagingComponent } from './messaging/messaging.component';
 import { FunctionsComponent } from './functions/functions.component';
-import { FirestoreOfflineComponent } from './firestore-offline/firestore-offline.component';
-import { FirestoreOfflineModule } from './firestore-offline/firestore-offline.module';
 import { UpboatsComponent } from './upboats/upboats.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     StorageComponent,
     FirestoreComponent,
-    FirestoreOfflineComponent,
     DatabaseComponent,
     RemoteConfigComponent,
     HomeComponent,
@@ -61,22 +58,20 @@ import { UpboatsComponent } from './upboats/upboats.component';
     AngularFireModule.initializeApp(environment.firebase),
     AngularFireStorageModule,
     AngularFireDatabaseModule,
-    AngularFirestoreModule,
     AngularFireAuthModule,
     AngularFireAuthGuardModule,
     AngularFireRemoteConfigModule,
     AngularFireMessagingModule,
     AngularFireAnalyticsModule,
     AngularFireFunctionsModule,
     AngularFirePerformanceModule,
-    FirestoreOfflineModule
   ],
   providers: [
     UserTrackingService,
     ScreenTrackingService,
     PerformanceMonitoringService,
     { provide: FIRESTORE_SETTINGS, useValue: { ignoreUndefinedProperties: true } },
-    { provide: ANALYTICS_DEBUG_MODE, useValue: true },
+    { provide: ANALYTICS_DEBUG_MODE, useFactory: isDevMode },
     { provide: COLLECTION_ENABLED, useValue: true },
     { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9099] : undefined },
     { provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9000] : undefined },

sample/src/app/app.server.module.ts

@@ -1,18 +1,19 @@
-import { isDevMode, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
-
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
 import { APP_BASE_HREF } from '@angular/common';
+import { AngularFirestoreModule } from '@angular/fire/firestore-lazy/memory';
 
 @NgModule({
   imports: [
     AppModule,
     ServerModule,
-    ServerTransferStateModule
+    ServerTransferStateModule,
+    AngularFirestoreModule
   ],
   providers: [
-    { provide: APP_BASE_HREF, useFactory: () => isDevMode() ? '/us-central1/ssr' : '/ssr' },
+    { provide: APP_BASE_HREF, useFactory: () => process.env.FUNCTIONS_EMULATOR === 'true' ? '/aftest-94085/us-central1/ssr' : '/ssr' },
   ],
   bootstrap: [AppComponent],
 })

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

@@ -1,10 +1,9 @@
 import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
-import { AngularFireDatabase } from '@angular/fire/database';
-import { EMPTY, Observable } from 'rxjs';
+import { AngularFireDatabase } from '@angular/fire/database-lazy';
+import { Observable } from 'rxjs';
 import { makeStateKey, TransferState } from '@angular/platform-browser';
 import { startWith, tap } from 'rxjs/operators';
 import { trace } from '@angular/fire/performance';
-import { isPlatformServer } from '@angular/common';
 
 @Component({
   selector: 'app-database',
@@ -21,17 +20,13 @@ export class DatabaseComponent implements OnInit {
   public readonly testObjectValue$: Observable<any>;
 
   constructor(state: TransferState, database: AngularFireDatabase, @Inject(PLATFORM_ID) platformId: object) {
-    if (isPlatformServer(platformId)) {
-      this.testObjectValue$ = EMPTY;
-    } else {
-      const doc = database.object('test');
-      const key = makeStateKey(doc.query.toString());
-      const existing = state.get(key, undefined);
-      this.testObjectValue$ = doc.valueChanges().pipe(
-        trace('database'),
-        existing ? startWith(existing) : tap(it => state.set(key, it))
-      );
-    }
+    const doc = database.object('test');
+    const key = makeStateKey(doc.query.toString());
+    const existing = state.get(key, undefined);
+    this.testObjectValue$ = doc.valueChanges().pipe(
+      trace('database'),
+      existing ? startWith(existing) : tap(it => state.set(key, it))
+    );
   }
 
   ngOnInit(): void {

sample/src/app/firestore/firestore.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { AngularFirestore } from '@angular/fire/firestore';
+import { AngularFirestore } from '../../firestore';
 import { Observable } from 'rxjs';
 import { startWith, tap } from 'rxjs/operators';
 import { makeStateKey, TransferState } from '@angular/platform-browser';
@@ -10,24 +10,21 @@ import { trace } from '@angular/fire/performance';
   template: `<p>
     Firestore!
     {{ testDocValue$ | async | json }}
-    {{ persistenceEnabled$ | async }}
   </p>`,
   styles: [``]
 })
 export class FirestoreComponent implements OnInit {
 
-  public readonly persistenceEnabled$: Observable<boolean>;
   public readonly testDocValue$: Observable<any>;
 
   constructor(state: TransferState, firestore: AngularFirestore) {
     const doc = firestore.doc('test/1');
-    const key = makeStateKey(doc.ref.path);
+    const key = makeStateKey('test/1');
     const existing = state.get(key, undefined);
-    this.testDocValue$ = firestore.doc('test/1').valueChanges().pipe(
+    this.testDocValue$ = doc.valueChanges().pipe(
       trace('firestore'),
       existing ? startWith(existing) : tap(it => state.set(key, it))
     );
-    this.persistenceEnabled$ = firestore.persistenceEnabled$;
   }
 
   ngOnInit(): void {

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

@@ -8,7 +8,6 @@ import { FirebaseApp } from '@angular/fire';
     {{ firebaseApp.name }}
     <app-database></app-database>
     <app-firestore></app-firestore>
-    <app-firestore-offline></app-firestore-offline>
     <app-upboats></app-upboats>
     <app-storage></app-storage>
     <app-auth></app-auth>

sample/src/app/protected-lazy/protected-lazy.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { DocumentChangeAction } from '@angular/fire/firestore';
+import { AngularFirestore, DocumentChangeAction } from '../../firestore';
 import { Observable } from 'rxjs';
-import { AngularFirestoreOffline } from '../firestore-offline/firestore-offline.module';
 
 @Component({
   selector: 'app-protected-lazy',
@@ -12,7 +11,7 @@ export class ProtectedLazyComponent implements OnInit {
 
   public snapshot: Observable<DocumentChangeAction<unknown>[]>;
 
-  constructor(private afs: AngularFirestoreOffline) {
+  constructor(private afs: AngularFirestore) {
     this.snapshot = afs.collection('test').snapshotChanges();
   }