Angular Universal (ssr) not working for Firestore and Geofirestore

问题

Issue: Angular Universal (ssr) not work for pages that use Firebase Firestore database.

Tech: Angular version 7, Angular Cli, Angular Universal, Firebase hosting, Firebase Functions, Firebase Firestore database.

My server side rendering works fine on all pages. Issue is when I view this page: [https://behired-staging.firebaseapp.com/job-board][1] it doesnt show the data.

The data doesnt take too long to load either. I see the html, but not the ul li for the list of 20 jobs on display.

Current Status:

After further investigation it seems that firestore works fine with angularFire. The reason its not working for me is due to the usage of firestore and geofirestore. Geofirestore seems to prevent ssr working

Is their something I need to set in my webpack config:

const regex = /firebase\/(app|firestore)/;
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'none',
  entry: {
    server: './server.ts'
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  optimization: {
    minimize: false
  },
  externals: [function(context, request, callback) {
    if(regex.test(request) && !/.*angularfire.*/i.test(request)) {
      return callback(null, 'commonjs ' + request);
    }
    callback();
  }],
  output: {
    path: path.join(__dirname, 'dist'),
    library: 'app',
    libraryTarget: 'umd',
    filename: '[name].js',
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      {
        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
        parser: { system: true },
      },
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'),
      {}
    ),
    new webpack.ContextReplacementPlugin(
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

This is my functions package.json:

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/animations": "~7.2.0",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/fire": "^5.1.0",
    "@angular/forms": "~7.2.0",
    "@angular/http": "~7.2.0",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/platform-server": "~7.2.0",
    "@angular/pwa": "^0.13.6",
    "@angular/router": "~7.2.0",
    "@angular/service-worker": "^7.2.11",
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@firebase/app": "^0.3.14",
    "@hackages/ngxerrors": "^6.0.3",
    "@kolkov/angular-editor": "^0.13.1",
    "@nguniversal/express-engine": "^7.1.1",
    "@nguniversal/module-map-ngfactory-loader": "0.0.0",
    "@ngx-meta/core": "^6.0.0",
    "@ngx-pwa/offline": "^6.1.0",
    "@sentry/browser": "^4.4.2",
    "angular-google-map": "0.0.2",
    "animate.css": "^3.7.0",
    "aos": "^2.3.4",
    "basscss": "7.1.1",
    "basscss-sass": "^4.0.0",
    "chart.js": "^2.7.3",
    "core-js": "^2.5.4",
    "express": "^4.15.2",
    "firebase": "^5.5.6",
    "firebase-admin": "~7.0.0",
    "firebase-functions": "^2.2.0",
    "fs-extra": "^7.0.1",
    "geofirestore": "^3.2.1",
    "http-server": "^0.11.1",
    "latlon-geohash": "^1.1.0",
    "lodash": "^4.17.10",
    "lozad": "^1.9.0",
    "moment": "^2.22.2",
    "ng2-truncate": "^1.3.17",
    "ngx-google-places-autocomplete": "^2.0.1",
    "ngx-prevent-double-submission": "^0.1.0",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.3.3",
    "sass-lint": "^1.12.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "engines": {
    "node": "8"
  },
  "private": true
}

This is my tsconfig.prerender.json file:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/agm",
    "types": [],
    "module": "commonjs"
  },
  "include": [
    "node_modules/@angular/fire",
    "node_modules/firebase",
    "node_modules/geofirestore",
    "node_modules/@agm/core",
    "node_modules/@hackages/ngxerrors",
    "node_modules/ngx-google-places-autocomplete",
    "node_modules/ngx-prevent-double-submission",
    "node_modules/@ngx-meta/core"
  ]
}

来源：https://stackoverflow.com/questions/55634099/angular-universal-ssr-not-working-for-firestore-and-geofirestore