具有Firebase云功能的Angular（8）Universal-无法匹配任何路由

Question

更新：我创建了一个新项目，进行了每个角度更新，现在在8.2.0上似乎可以正常工作。只需按照以下说明进行操作，但webpack中当前存在一个错误。因此，在构建“ npm run build：ssr”之后，在functions / dist中打开server.js并编辑第3和7行，如下所示：

if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory(require("./server/main"));
else if(typeof define === 'function' && define.amd)
    define(["require(\"./server/main\")"], factory);
else if(typeof exports === 'object')
    exports["app"] = factory(require("./server/main"));
else
    root["app"] = factory(root["require(\"./server/main\")"]);

（之前：“ factory（require（” require（\“ ./ server / main \”）“））;”）

非常感谢Michele Da Rin Fioretto在“ https://blog.daudr.me/painless-angular-ssr/#comment-4605393279 ” 上为我提供的帮助。如果您遇到相同的问题，请前往那儿并感谢他。

---

我有一个使用firebase的Angular（8）商店webapp。但是由于我没有使用Angular-Universal，所以无法在产品站点上设置标题/元标记。为了解决该问题，我尝试添加角度通用并将该应用程序部署到Firebase云功能，但是，一旦Firebase接管，便不再匹配任何路由。

我也跟着上angular.io的官方指南，然后切换到fireship.io的辉煌杰夫Delanay的教程链接教程，并在这个题目看了一些媒体的文章像这样的。我创建了（几个）新应用，并反复尝试。只要ssr-express服务器处理请求，一切都可以正常工作（新的angular 8延迟加载箭头功能除外）。先执行“ npm run build：ssr”再执行“ npm run serve：ssr”，但是一旦为Firebase云功能准备了代码并且“ firebase serve”接管了代码，“ localhost：5000”就可以工作，但是打开任何链接就像“ / about”示例一样，控制台输出直接指出没有路由可以匹配。自从我尝试了官方文档和几篇中型文章以来，这肯定是一个非常常见的问题，但是我在这里找不到有关此主题的任何问题。

由于我看不到如何在stackblitz或其他任何地方进行审查，因此，我将尝试（简要地）描述我的所作所为，并在需要的地方显示相应的代码。

tl; dr ：（已过时） Firebase Server Github存储库

（基本上打开firebase服务器，单击按钮并按f5键）

必要的预建：

ng new cloudfunctionsangularuniversal && cd cloudfunctionsangularuniversal
ng add @angular/fire
ng add @nguniversal/express-engine --clientProject cloudfunctionsangularuniversal
ng g c landing
ng g c ssrtesting

/src/app/app-routing.module.ts：更新路由

//..
const routes: Routes = [
  { path: '', component: LandingComponent },
  { path: 'ssrtesting', component: SsrtestingComponent }
];

由于我想在项目中使用firebase，因此我需要XMLHttpRequest变量

npm install ws xhr2 bufferutil utf-8-validate  -D

/server.ts：使用刚刚安装的软件包更新服务器

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

此时，“ npm run build：ssr”后跟“ npm run serve：ssr”将启动快速服务器，该服务器可以正确处理所有传入请求。

但是要将应用程序与Firebase一起使用，需要进行一些更改。

初始化Firebase（选择功能和托管）

firebase init 

/firebase.json：将所有流量重写为一个函数。

//...
"hosting": {
  "public": "dist/browser",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "function": "ssr"
    }
  ]
},
//...

/server.ts：导出应用程序const，然后删除调用以进行监听。

export const app = express();
// ...
// app.listen(PORT, () => {
//   console.log(`Node Express server listening on http://localhost:${PORT}`);
// });

/webpack.server.config.js：使您的应用成为库

// ...
output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    library: 'app',
    libraryTarget: 'umd',
    filename: '[name].js',
  },
// ...

/movedist.js：创建一个帮助程序，将其通过构建应用程序从“ dist”文件夹复制到“ functions / dist”

const fs = require('fs-extra');

(async() => {

    const src = './dist';
    const copy = './functions/dist';

    await fs.remove(copy);
    await fs.copy(src, copy);

})();

安装所需的软件包

npm i --save fs-extra

/package.json：更新您的构建命令

//...
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server && node movedist && cd functions && npm run build"
//...

最后，创建使用的应用程序/functions/src/index.ts

import * as functions from 'firebase-functions';
const universal = require(`${process.cwd()}/dist/server`).app;

export const ssr = functions.https.onRequest(universal);

现在运行

npm run build:ssr

一切都应该准备就绪，因此请使用

firebase serve

当打开“ localhost：5000”时，一切似乎都很好。但是在隐身窗口中打开它，然后打开“ localhost：5000 / ssrtesting”，控制台将为您提供

“错误{错误：未捕获（承诺）：错误：无法匹配任何路由。URL段：'cloudfunctionsangularuniversal / us-central1 / ssr / ssrtesting'”

在成功呈现页面之前。这在Firebase服务器上是不会发生的。在线会触发404。

Firebase服务器 Github存储库

任何帮助，将不胜感激。

Answer 1

尝试在/^firebase/里面添加externalswebpack.server.config.js