angular - Angular (8) Universal with firebase cloud 功能

问题描述

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

（之前：“工厂（要求（“要求（\”./server/main\“）”））；“）

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

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

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

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

tl;dr：（过时的） Firebase 服务器 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: 导出应用程序常量，然后删除监听的调用。

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"
//...

最后，创建使用的app /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 存储库

任何帮助，将不胜感激。

标签： angularfirebasegoogle-cloud-functionsangular-universalangular8

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

问题描述

解决方案

推荐阅读