Блог

Проблема: Angular Universal (ssr) не работает для страниц, использующих базу данных Firebase Firestore.

Технология: Angular версии 7, Angular Cli, Angular Universal, хостинг Firebase, функции Firebase, база данных Firebase Firestore.

Мой рендеринг на стороне сервера отлично работает на всех страницах. Проблема заключается в том, когда я просматриваю эту страницу: [https://behired-staging.firebaseapp.com/job-board ][1] он не показывает данные.

Загрузка данных также не занимает слишком много времени. Я вижу html, но не ul li для списка из 20 отображаемых заданий.

Текущее состояние:

После дальнейшего изучения кажется, что firestore отлично работает с AngularFire. Причина, по которой он не работает для меня, связана с использованием firestore и geofirestore. Похоже, что Geofirestore предотвращает работу ssr

Это то, что мне нужно установить в моей конфигурации webpack:

 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) amp;amp; !/.*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'),
      {}
    )
  ]
};
  

Это мой пакет функций.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
}
  

Это мой файл tsconfig.prerender.json:

 {
  "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"
  ]
}