迁移 Angular Universal firebase 后云函数抛出错误

Question

我有一个托管在 Firebase 中的 SPA，并且我一直在使用 Firestore 来存储数据。我还使用云函数进行一些 https 操作和某些其他数据库读写。

最近，我使用角度通用更新了从客户端到服务器端的渲染逻辑，这是非常成功的。这是我点击的链接：https ://fireship.io/lessons/angular-universal-firebase/

基本上，我创建了一个 https 函数来在云函数中渲染 ssr。

const universal = require(`${process.cwd()}/dist/server`).app;
exports.api = functions.https.onRequest(app); //Application related endpoint line makepayment, createorder etc.,
exports.ssr = functions.https.onRequest(universal);

现在，一旦我部署了这个函数，api https我曾经访问db.collection 或db.doc开始抛出错误的所有函数。以下是对 的相同调用db.doc。

db.doc("samplecollection/docid")
.get()
.then(function (doc) {
   console.log('doc.data', doc.data());
})
.catch(function (error) {
   console.log('Error in fetching samplecollection doc', error);
});

现在，当我尝试执行上述操作时，出现以下错误。

Error in autogenerated TypeError [ERR_INVALID_ARG_TYPE]: The "path"
 argument must be of type string. Received type object
      at validateString (internal/validators.js:125:11)
      at Object.basename (path.js:744:5)
      at GrpcClient.loadProto (sampleproject\functions\node_modules\google-gax\build\src\grpc.js:133:29)
      at new FirestoreClient (sampleproject\functions\node_modules\@google-cloud\firestore\build\src\v1\firestore_client.js:121:32)
      at ClientPool.Firestore._clientPool.pool_1.ClientPool [as clientFactory]
 (sampleproject\functions\node_modules\@google-cloud\firestore\build\src\index.js:302:26)
      at ClientPool.acquire (sampleproject\functions\node_modules\@google-cloud\firestore\build\src\pool.js:67:35)
      at ClientPool.run (sampleproject\functions\node_modules\@google-cloud\firestore\build\src\pool.js:124:29)
      at Firestore.readStream (sampleproject\functions\node_modules\@google-cloud\firestore\build\src\index.js:947:26)
      at Firestore.getAll_ (sampleproject\functions\node_modules\@google-cloud\firestore\build\src\index.js:680:14)
      at initializeIfNeeded.then (sampleproject\functions\node_modules\@google-cloud\firestore\build\src\index.js:650:61)
      at ZoneDelegate.invoke (sampleproject\functions\dist\server.js:5715:30)
      at Zone.run (sampleproject\functions\dist\server.js:5472:47)
      at sampleproject\functions\dist\server.js:6213:38
      at ZoneDelegate.invokeTask (sampleproject\functions\dist\server.js:5750:35)
      at Zone.runTask (sampleproject\functions\dist\server.js:5517:51)
      at drainMicroTaskQueue (sampleproject\functions\dist\server.js:5930:39)
      at process._tickCallback (internal/process/next_tick.js:68:7)

我不太确定为什么错误显示“路径”参数必须是字符串类型。收到类型对象。我尝试将文档的路径分配给变量并使用 检查其类型typeof，它仍然显示为string。

需要注意的关键点是 - 如果我删除复制到目录中的ssr函数和dist文件夹functions，则具有同一行代码的所有内容都可以正常工作。所以，我强烈怀疑，这与SSR有关。

我为此做了很多谷歌搜索，但没有一个有这种 SSR 设置。有人可以给我指出正确的方向吗？或者让我知道是否有人在 Angular Universal SSR 中遇到过这个问题并找到了解决方案？

---

更新 - 1

我在文件中设置了以下选项webpack.server.config.js。这会有问题吗？

node: {
    __dirname: false
},

更新 - 2

这是为开发和生产环境配置的 firebase.json。

{
  "hosting": [
    {
      "public": "dist/browser",
      "target": "staging",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "function": "ssr"
        }
      ],
      "headers": [
        {
          "source": "**/*.@(jpg|jpeg|gif|png|svg|js|css|css?*|eot|otf|ttf|ttc|woff|woff2)",
          "headers": [
            {
              "key": "Access-Control-Allow-Origin",
              "value": "*"
            },
            {
              "key": "Cache-Control",
              "value": "max-age=31536000"
            }
          ]
        },
        {
          "source": "404",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=7200"
            }
          ]
        }
      ]
    },
    {
      "public": "dist",
      "target": "production",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ],
  "functions": {
    "include": ["**/views/**"]
  }
}

目前，我刚刚在stagingie [开发环境] 中配置了这个进行测试，但这个问题甚至会影响生产环境，因为两者的云功能将保持不变。

更新 - 3

经过进一步调查，我注意到依赖项中存在的firestore_client.js路径下有下面的代码来识别它是否是浏览器。node_modulesfunctionsnode_modules/@google-cloud/firestore/build/src/v1

const isBrowser = typeof window !== 'undefined';
if (isBrowser) {
    opts.fallback = true;
}
.....
.....
.....
// Load the applicable protos.
// For Node.js, pass the path to JSON proto file.
// For browsers, pass the JSON content.
const nodejsProtoPath = path.join(__dirname, '..', '..', 'protos', 'protos.json');
const protos = gaxGrpc.loadProto(opts.fallback ? require('../../protos/protos.json') : nodejsProtoPath);

因此firestore_client.js，通过检查typeof window !== undefined. 但是，在我的server.tsSPA 中，我是global['window'] = win从domino库中定义的。添加它是因为它会抛出window is not definedReferenceError。

基本上，这意味着，firestore_client.js能够window通过 确定对象server.js，生成并保存在functions文件夹中，因此它传递protos.json作为对象的文件内容，而不是路径。阅读上述文件中写的注释，我觉得这里应该传递文件的路径，而不是nodejs环境的对象。

知道吗，我现在该如何克服这个问题？

Answer 1

所以我有两个选择，希望其中一个能起作用。

1. 尝试旧版本：卸载当前安装：

npm uninstall @angular/fire firebase --save

然后安装旧版本，我做了如下：

npm install @angular/fire@5.0.0 firebase@5.9.0 --save

2. 不确定你的 webpack.server.config 中是否有这个：

module.exports = {
...
 resolve: {
    alias: {
      ['firebase/app']: path.resolve(__dirname, 'node_modules/firebase/app/dist/index.cjs.js')
    }
  }
...
}