1

问题：Angular Universal (ssr) 不适用于使用 Firebase Firestore 数据库的页面。

技术：Angular 版本 7、Angular Cli、Angular Universal、Firebase 托管、Firebase Functions、Firebase Firestore 数据库。

我的服务器端渲染在所有页面上都能正常工作。问题是当我查看此页面时：[ https://behired-staging.firebaseapp.com/job-board][1]它不显示数据。

数据也不需要太长时间来加载。我看到了 html，但没有看到显示的 20 个工作列表的 ul li。

当前状态：

经过进一步调查，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) && !/.*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'),
      {}
    )
  ]
};

这是我的函数 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
}

这是我的 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"
  ]
}
4

0 回答 0