Angular Universal 部署到云函数未加载样式或 JS答案

【问题标题】：Angular Universal Deployed To Cloud Function Not Loading Styles or JSAngular Universal 部署到云函数未加载样式或 JS
【发布时间】：2021-03-28 00:06:43
【问题描述】：

我有一个带有 Angular Material 样式的准系统 Angular 11 项目。我打算使用 Google Cloud Function 来托管它。当我使用npm run dev:ssr 运行项目时，它运行没有问题。但是，在我使用 AngularFire 的 ng deploy 函数后，它确实将通用项目部署为云函数，但没有加载 JS 和 CSS 文件。请参阅下面的屏幕截图。

对比

那么为什么不将样式/js 应用到云功能中呢？如果我查看我的云功能日志，我会收到一些 304 错误消息。如果我查看页面的控制台，我有请求的样式/js 文件的 403 错误代码。我注意到 html 已链接文件，如下所示：

<link rel="stylesheet" href="styles.dbb0bce96e655a5b656e.css">

但是，如果使用显式 url 编辑 html，它可以工作。

<link rel="stylesheet" href="https://us-central1-inhouse-dev-ddaad.cloudfunctions.net/ssr/styles.dbb0bce96e655a5b656e.css">

你可以找到我的整个项目here on github。我不知道如何解决这个问题，因为我不知道问题的根源是什么。

【问题讨论】：

为什么要将它托管为云功能？？？？？？云功能不是用来托管网站的！请改用 Firebase 托管。 firebase.google.com/docs/hosting
请参阅下面的评论以回答。

标签： angular google-cloud-functions angularfire2

【解决方案1】：

您没有将 Cloud Functions 用于其设计目的。 Cloud Functions 是一种功能即服务 (FaaS) 产品，这意味着它仅设计用于执行服务器端功能，如果您想在应用程序中使用 Cloud Functions，您可以做的是将后端的各个功能部署到它.

要在 Google Cloud/Firebase 中托管整个应用，您可以使用提供的多种产品。根据您分享的内容，我推荐App Engine 或Firebase Hosting。另外，有兴趣的可以看看 Cloud Functions documentation

编辑：

根据您分享的评论，Angular Universal 将允许您部署到任一 Cloud Functions 或 Firebase Hosting，如您分享的文档中所述，但鉴于 Cloud Functions 是 FaaS 产品，那么您尝试做的仍然不是它的用途，也不是 Angular Universal 的开发人员想要的，因为他们还可以选择 Firebase Hosting 作为托管应用程序的替代方案 .

话虽如此，正如您在问题中所分享的那样，您也许可以部署它，但由于这是 Cloud Functions 并且由于上述原因，它很可能不会像您预期的那样运行，并且它无法将您的 href 链接到 .css 文件是有道理的，因为这不是 Cloud Functions 具有的功能。

【讨论】：

Angular Universal 是 Angular 应用程序的服务器端渲染引擎。事实上，AngularFire 库（由 Google 支持）有一个预定义的脚本 ng deploy 用于部署到云功能。在 Github 上查看他们的文档。我知道由于冷启动时间，它可能不是最佳解决方案，但这是一个很好的用例。 github.com/angular/angularfire/blob/master/docs/universal/…
@MarcusGallegos 在分析 Angular Unversal 后，我用一些额外的参数编辑了答案，请看一下。