Angular (8) Universal with firebase cloud functions - 无法匹配任何路由

Question

更新:我创建了一个新项目，其中包含每个 Angular 更新，现在在 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\")"]);

(之前:“工厂(要求(“要求(\”。/服务器/主\“)”));”)

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

---

我有一个使用 firebase 的 Angular (8) 商店网络应用程序。但由于我没有使用 Angular-Universal，我无法在产品网站上设置标题/元标签。为了解决这个问题，我尝试添加 angular-universal 并将应用程序部署到 firebase cloud-functions，但是一旦 firebase 接管，就不再有任何路由可以匹配了。

我遵循了 angular.io 上的官方指南，然后切换到 fireship.io 的杰夫·德莱奈 (Jeff Delanay) 的教程 link to the tutorial并阅读有关此主题的一些媒体文章 like this one .我创建了(几个)新应用程序并反复尝试。只要 ssr-express 服务器处理请求，一切正常(除了新的 angular 8 延迟加载箭头功能)。 “npm run build:ssr”后跟“npm run serve:ssr”效果很好，但是一旦代码为 firebase 云功能准备好并且“firebase serve”接管，“localhost:5000”就可以工作，但打开任何链接直接地，就像“/about”示例一样，控制台输出表明没有匹配的路由。由于我尝试了官方文档和一些媒体文章，这一定是一个非常普遍的问题，但我在这里找不到关于这个主题的任何问题。

由于我看不出这将如何在 stackblitz 或其他任何地方进行审查，我将尝试(简要地)描述我所做的并在需要时显示相应的代码。

tl;dr:(已过时) Firebase Server Github Repo

(基本上打开 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:导出app 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”，控制台会给你

"ERROR { Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'cloudfunctionsangularuniversal/us-central1/ssr/ssrtesting'"

在成功呈现页面之前。这不会发生在 firebase 服务器上。在网上它会触发 404。

Firebase Server Github Repo

如有任何帮助，我们将不胜感激。

Answer 1

尝试在 webpack.server.config.js 中的 externals 中添加 /^firebase/