Angular 8服务器端渲染不适用于Firebase

Question

我正在与Angular Universal建立Angular 8项目，以使我的项目对SEO更友好。我真正的阻止者是当我想运行npm run server:ssr时引发与@firebase/app package相关的错误。

我正在Windows 10计算机Angular 8和Firebase ^ 6.2.0上运行项目

angular.json文件：

          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },

这是我收到的消息：

@firebase/app:
      Warning: This is a browser-targeted Firebase bundle but it appears it is being
      run in a Node environment.  If running in a Node environment, make sure you
      are using the bundle specified by the "main" field in package.json.

      If you are using Webpack, you can specify "main" as the first item in
      "resolve.mainFields":
      https://webpack.js.org/configuration/resolve/#resolvemainfields

      If using Rollup, use the rollup-plugin-node-resolve plugin and specify "main"
      as the first item in "mainFields", e.g. ['main', 'module'].
      https://github.com/rollup/rollup-plugin-node-resolve

Answer 1

您正在使用的Firebase捆绑包仅用于浏览器/客户端。困扰您的代码位于服务器端。

您需要导入（并设置）firebase-admin才能在服务器端（NodeJS）上运行。

如果您在客户端和服务器上都使用相同的代码，请确保使用如下标记来分隔客户端代码：

if( process.env.NODE_ENV === 'development') { 
    // client-side only code ... 
}

让我知道是否需要更多帮助！

Answer 2

我通过安装这两个软件包来解决此问题：

npm i xmlhttprequest ws -s
npm i bufferutil utf-8-validate -s

并将其添加到我的server.ts文件的顶部：

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');

感谢您的帮助。