Bumping deps, sample has SSR, eval isSupported

angular · jamesdaniels · Aug 25, 2021 · Aug 20, 2021 · Aug 24, 2021 · Aug 24, 2021
commit 29344bcbbfe6bf43643d283e651a781f0372668b
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.0.0",
     "@angular/router": "^12.0.0",
-    "firebase": "9.0.0-2021720181311",
+    "firebase": "9.0.0-202172321475",
     "firebase-admin": "^8.10.0",
     "firebase-functions": "^3.6.0",
     "firebase-tools": "^8.0.0 || ^9.0.0",

diff --git a/sample-compat/package.json b/sample-compat/package.json
@@ -30,11 +30,12 @@
     "@angular/platform-server": "~12.2.2",
     "@angular/router": "~12.2.2",
     "@angular/service-worker": "~12.2.2",
+    "@nguniversal/express-engine": "12.1.0",
     "core-js": "^3.6.5",
-    "firebase": "9.0.0-202171919375",
+    "firebase": "9.0.0-202172321475",
     "first-input-delay": "^0.1.3",
     "proxy-polyfill": "^0.3.2",
-    "rxfire": "6.0.0-rc.0",
+    "rxfire": "6.0.0-rc.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
     "whatwg-fetch": "^3.4.1",
@@ -47,6 +48,7 @@
     "@angular/compiler-cli": "~12.2.2",
     "@angular/language-service": "~12.2.2",
     "@firebase/app-types": "^0.6.1",
+    "@nguniversal/builders": "^12.1.0",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "codelyzer": "^6.0.0",

diff --git a/sample-compat/yarn.lock b/sample-compat/yarn.lock
diff --git a/sample/angular.json b/sample/angular.json
@@ -24,7 +24,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/sample",
+            "outputPath": "dist/sample/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -115,6 +115,67 @@
         "deploy": {
           "builder": "@angular/fire:deploy",
           "options": {}
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/sample/server",
+            "main": "server.ts",
+            "tsConfig": "tsconfig.server.json",
+            "optimization": false,
+            "sourceMap": true,
+            "extractLicenses": false
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            },
+            "development": {
+              "optimization": false,
+              "sourceMap": true,
+              "extractLicenses": false
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "configurations": {
+            "development": {
+              "browserTarget": "sample:build:development",
+              "serverTarget": "sample:server:development"
+            },
+            "production": {
+              "browserTarget": "sample:build:production",
+              "serverTarget": "sample:server:production"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "prerender": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "routes": [
+              "/"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "sample:build:production",
+              "serverTarget": "sample:server:production"
+            },
+            "development": {
+              "browserTarget": "sample:build:development",
+              "serverTarget": "sample:server:development"
+            }
+          },
+          "defaultConfiguration": "production"
         }
       }
     }

diff --git a/sample/package.json b/sample/package.json
@@ -9,7 +9,11 @@
     "analyze": "webpack-bundle-analyzer dist/sample/stats.json",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "lint": "ng lint"
+    "lint": "ng lint",
+    "dev:ssr": "ng run sample:serve-ssr",
+    "serve:ssr": "node dist/sample/server/main.js",
+    "build:ssr": "ng build && ng run sample:server",
+    "prerender": "ng run sample:prerender"
   },
   "private": true,
   "dependencies": {
@@ -21,19 +25,27 @@
     "@angular/forms": "^12.0.0",
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.0.0",
+    "@angular/platform-server": "^12.0.0",
     "@angular/router": "^12.0.0",
-    "firebase": "9.0.0-202171919375",
+    "@nguniversal/express-engine": "12.1.0",
+    "cross-fetch": "^3.1.4",
+    "express": "^4.15.2",
+    "firebase": "9.0.0-202172321475",
     "lodash.isequal": "^4.5.0",
-    "rxfire": "6.0.0-rc.0",
+    "rxfire": "6.0.0-rc.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
+    "ws": "^8.2.0",
+    "xhr2": "^0.2.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/architect": "^0.1200.0",
     "@angular-devkit/build-angular": "^12.0.0",
     "@angular/cli": "^12.0.0",
     "@angular/compiler-cli": "^12.0.0",
+    "@nguniversal/builders": "^12.1.0",
+    "@types/express": "^4.17.0",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "firebase-tools": "^8.0.0",

diff --git a/sample/server.ts b/sample/server.ts
@@ -0,0 +1,70 @@
+import 'zone.js/dist/zone-node';
+
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import { join } from 'path';
+
+import { AppServerModule } from './src/main.server';
+import { APP_BASE_HREF } from '@angular/common';
+import { existsSync } from 'fs';
+
+// Polyfills
+require('cross-fetch/polyfill');
+
+
+// Polyfill XMLHttpRequest and WS for Firebase
+/* tslint:disable:no-string-literal */
+global['XMLHttpRequest'] = require('xhr2');
+global['WebSocket'] = require('ws');
+/* tslint:enable:no-string-literal */
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const distFolder = join(process.cwd(), 'dist/sample/browser');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule,
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
+
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env.PORT || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = mainModule && mainModule.filename || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  run();
+}
+
+export * from './src/main.server';
diff --git a/sample/src/app/app-routing.module.ts b/sample/src/app/app-routing.module.ts
@@ -4,7 +4,9 @@ import { RouterModule, Routes } from '@angular/router';
 const routes: Routes = [];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {
+    initialNavigation: 'enabled'
+  })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }
diff --git a/sample/src/app/app.browser.module.ts b/sample/src/app/app.browser.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { getRemoteConfig, provideRemoteConfig } from '@angular/fire/remote-config';
+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';
+
+@NgModule({
+  imports: [
+    AppModule,
+    provideRemoteConfig(() => getRemoteConfig()),
+    provideAnalytics(() => getAnalytics()),
+    provideMessaging(() => getMessaging()),
+    providePerformance(() => getPerformance()),
+    provideFunctions(() => getFunctions()),
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppBrowserModule {}
diff --git a/sample/src/app/app.component.spec.ts b/sample/src/app/app.component.spec.ts
@@ -1,5 +1,6 @@
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {

diff --git a/sample/src/app/app.component.ts b/sample/src/app/app.component.ts
@@ -1,10 +1,10 @@
-import { ApplicationRef, Component, NgZone } from '@angular/core';
+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, getDoc, doc, DocumentSnapshot } from '@angular/fire/firestore/lite';
-import { Firestore, FirestoreInstances } from '@angular/fire/firestore';
+import { Firestore as FirestoreLite, FirestoreInstances as FirestoreLiteInstances } from '@angular/fire/firestore/lite';
+import { Firestore, FirestoreInstances, getDoc, doc, DocumentSnapshot } from '@angular/fire/firestore';
 import { DocumentData } from 'rxfire/firestore/lite/interfaces';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { distinctUntilChanged } from 'rxjs/operators';
 import { Storage, StorageInstances } from '@angular/fire/storage';
 import { Messaging, MessagingInstances } from '@angular/fire/messaging';
 import { RemoteConfig, RemoteConfigInstances } from '@angular/fire/remote-config';
@@ -29,26 +29,25 @@ export class AppComponent {
     auth: Auth, // default Firbase Auth
     apps: FirebaseApps, // all initialized App instances
     authInstances: AuthInstances, // all initialized Auth instances
-    firestoreLite: FirestoreLite,
-    firestoreLiteInstances: FirestoreLiteInstances,
-    firestore: Firestore,
-    firestoreInstances: FirestoreInstances,
+    @Optional() firestoreLite: FirestoreLite,
+    @Optional() firestoreLiteInstances: FirestoreLiteInstances,
+    @Optional() firestore: Firestore,
+    @Optional() firestoreInstances: FirestoreInstances,
     storage: Storage,
     storageInstances: StorageInstances,
-    messaging: Messaging,
-    messagingInstances: MessagingInstances,
-    remoteConfig: RemoteConfig,
-    remoteConfigInstances: RemoteConfigInstances,
-    functions: Functions,
-    functionsInstances: FunctionsInstances,
+    @Optional() messaging: Messaging,
+    @Optional() messagingInstances: MessagingInstances,
+    @Optional() remoteConfig: RemoteConfig,
+    @Optional() remoteConfigInstances: RemoteConfigInstances,
+    @Optional() functions: Functions,
+    @Optional() functionsInstances: FunctionsInstances,
     database: Database,
     databaseInstances: DatabaseInstances,
-    analytics: Analytics,
-    analyticsInstances: AnalyticsInstances,
-    performance: Performance,
-    performanceInstances: PerformanceInstances,
+    @Optional() analytics: Analytics,
+    @Optional() analyticsInstances: AnalyticsInstances,
+    @Optional() performance: Performance,
+    @Optional() performanceInstances: PerformanceInstances,
     appRef: ApplicationRef,
-    zone: NgZone,
   ) {
     console.log({
       app, auth, apps, authInstances, firestore, firestoreInstances,
@@ -59,9 +58,7 @@ export class AppComponent {
     });
     authState(auth).subscribe(it => console.log('authState', it));
     appRef.isStable.pipe(distinctUntilChanged()).subscribe(it => console.log('isStable', it));
-    this.myDocData = getDoc(doc(firestoreLite, 'animals/NJdGQCv1P92SWsp4nSE7'));
-    console.log((app as any).container);
-    // firestoreInstance$.subscribe(it => console.log('$', it));
-    // initializeFirestore$.subscribe(it => console.log('init', it));
+    this.myDocData = getDoc(doc(firestore, 'animals/NJdGQCv1P92SWsp4nSE7'));
+    this.myDocData.then(it => console.log(it.data()));
   }
 }
diff --git a/sample/src/app/app.module.ts b/sample/src/app/app.module.ts
@@ -2,29 +2,23 @@ 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 { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { environment } from '../environments/environment';
-import { provideFirestore as provideFirestoreLite, getFirestore as getFirestoreLite } from '@angular/fire/firestore/lite';
-import { getFirestore, provideFirestore } from '@angular/fire/firestore';
-import { getMessaging, provideMessaging } from '@angular/fire/messaging';
-import { getRemoteConfig, provideRemoteConfig } from '@angular/fire/remote-config';
-import { getStorage, provideStorage } from '@angular/fire/storage';
-import { getAnalytics, provideAnalytics } from '@angular/fire/analytics';
-import { getDatabase, provideDatabase } from '@angular/fire/database';
-import { getPerformance, providePerformance } from '@angular/fire/performance';
-import { getFunctions, provideFunctions } from '@angular/fire/functions';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
-    BrowserModule,
+    BrowserModule.withServerTransition({ appId: 'serverApp' }),
     AppRoutingModule,
     provideFirebaseApp(() => {
       const app = initializeApp(environment.firebase);
-      console.log(app);
       return app;
     }),
     provideFirebaseApp(() => {
@@ -33,17 +27,11 @@ import { getFunctions, provideFunctions } from '@angular/fire/functions';
       return app;
     }),
     provideAuth(() => initializeAuth(getApp())),
-    provideFirestore(() => getFirestore()),
-    provideFirestoreLite(() => getFirestoreLite()),
     provideDatabase(() => getDatabase()),
-    provideRemoteConfig(() => getRemoteConfig()),
     provideStorage(() => getStorage()),
-    provideAnalytics(() => getAnalytics()),
-    provideMessaging(() => getMessaging()),
-    providePerformance(() => getPerformance()),
-    provideFunctions(() => getFunctions()),
+    provideFirestore(() => getFirestore()),
   ],
   providers: [ ],
-  bootstrap: [AppComponent]
+  bootstrap: [ ],
 })
 export class AppModule { }