Angular Universal (ssr) 不适用于 Firestore 和 Geofirestore

2023-12-08

Issue:Angular Universal (ssr) 不适用于使用 Firebase Firestore 数据库的页面。

Tech:Angular 版本 7、Angular Cli、Angular Universal、Firebase 托管、Firebase 函数、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"
  ]
}

None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular Universal (ssr) 不适用于 Firestore 和 Geofirestore 的相关文章

随机推荐

  • 替换 pandas 数据框中每个单元格值的有效方法

    我有两个数据框 一个是topic 这是目标数据框和tw这是源数据框 这topic 是一个由单词组成的主题矩阵 其中每个单元格存储单词在特定主题中出现的概率 我已经初始化了topic 使用 numpy zeros 将数据帧清零 的一个样本tw
  • Tag 属性中的 WPF 数据绑定错误

  • https有什么用?

    我是 HTTPS 技术的初学者 我对 HTTPS 的实现有一些疑问 假设我有一张注册表 http www sitename com register php 如果我想在 HTTPS 中使用它 这将变成 https www sitename
  • 在本机 Hibernate 中设置 FetchMode

    我需要将休眠映射的获取模式设置为在某些情况下急切 而在其他情况下懒惰 我的默认值 通过 hbm 文件设置 为lazy true 如何在代码中覆盖此设置 MyClass 有一组定义为 MyClass2 类型的集合 我想将其 FetchMode
  • 在 Windows 中使用 Python 3 连接到 Sql Server

    有人能给我指出如何使用 Python 连接到 MS SQL Server 的正确方向吗 我想要做的是读取一个文本文件 提取一些值 然后将文本文件中的值插入到我的 Sql Server 数据库中的表中 我使用的是Python 3 1 3 我在
  • PyQt 更新 QLabel

    我有一个 QLabel 我使用新的 text 动态更新它 如下所示 self ui mylabel text foobar 问题是 此后它不会更新窗口上的新值 我尝试打电话self app processEvents 甚至是标签本身的更新s
  • 反转属性的最短方法

    在Java中我有一个java util Properties对象 我想获得另一个具有相同对但键转换为值的对象 反之亦然 如果存在冲突 即有两个相等的值 则只需选择任意键作为值 最短的方法是什么 请随意使用图书馆 公共收藏或其他任何东西 您可
  • UILongPressGestureRecognizer问题

    我有一个关于 UILongPressGestureRecognizer 的问题 我添加了如下代码所示的手势 ViewDidLoad UILongPressGestureRecognizer longRecognizer UILongPres
  • Ruby:require 与 require_relative - 在 Ruby <1.9.2 和 >=1.9.2 中运行的解决方法的最佳实践

    如果我想 最好的做法是什么requireRuby 中的相对文件and我希望它在 1 8 x 和 gt 1 9 2 中都能工作 我看到几个选项 just do LOAD PATH lt lt 并忘记一切 do LOAD PATH lt lt
  • C# 预处理器根据环境变量定义符号

    我有一些这样的逻辑 define MYVAR if MYVAR Attribute1 else Attribute2 endif 我希望能够根据环境变量切换应用于方法的属性 就像环境变量一样MYVAR设置后 然后实际定义符号 MYVAR 反
  • 获取python中两个日期之间日期的星期天数

    正如我在网站中搜索以获取 python 中的工作日数 但我也需要工作日的日期 My input将 start date 01 03 2019 end date 15 03 2019 days monday tuesday 预期的Output
  • 我可以从 Emacs 向 Windows 发送 按键吗?

    There is a function w32 toggle lock key to effectively simulate a press of capslock numlock or scroll lock key Is there
  • 如何将长整数和/或无符号整数传递给 MPI 参数?

    假设我有一个非常大的数组 我希望使用 MPI v1 发送或接收 为了索引该数组 我使用无符号长整数 现在 我见过的所有 MPI 函数调用都使用 int 类型作为其 count 参数 如下例所示 MPI Recv void buf int c
  • AS3在鼠标单击而不是在注册时放大和缩小

    我试图通过单击和双击鼠标事件来放大和缩小蒙版鼠标平移图像 我对图像进行了缩放 但它总是在左边缘注册点上放大 而不是在我单击的位置上 我完全不知道如何编写这个代码 并且花了一整天的时间在互联网上试图弄清楚它 但没有运气 我希望有人能帮助我解决
  • php 中不区分大小写的突出显示

    我使用这个函数来突出显示 mysql 查询的结果 function highlightWords string word string str replace word span class highlight word span stri
  • 在 Octave 中求解非线性方程

    我是 Octave 的新手 想知道如何求解非线性方程 这是一个示例方程 x 4 16x 3 61x 2 22x 12 0 Update w x y 1 3 2w 3x 4y 5 10 w x y 1 4 thanks Use fzero得到
  • 在“COPY .. TO ..”期间将时间戳转换为给定时区的本地时间

    我在 PostgreSQL 数据库中有一个日志表 其中包含event类型列timestamp without time zone 现在我有一个 bash 脚本 它从日志数据库创建一个 CSV 文件 psql c COPY SELECT ev
  • android 的 sendDataMessage() 的工作示例

    我尝试过使用发送数据消息 of android telephony SmsManager在我能遇到的几乎所有样本的帮助下 但没有成功 如果您想查看代码 只需检查 mobiForge 上的 发送短信 android 链接 我猜它是最受欢迎的链
  • “导入 pyodbc”导致“没有名为 pyodbc 的模块”

    我最近跑步pip install pyodbc 这表明它在cmd上成功安装了pyodbc 然而当我这样做时import pyodbc在 IDLE 中 我收到一条错误消息 没有名为 pyodbc 的模块 我运行时似乎只安装了两个文件pip i
  • Angular Universal (ssr) 不适用于 Firestore 和 Geofirestore

    Issue Angular Universal ssr 不适用于使用 Firebase Firestore 数据库的页面 Tech Angular 版本 7 Angular Cli Angular Universal Firebase 托管