如何使用 Firebase 功能部署 Angular 9 通用应用程序

Question

我最近更新到最新的 angular 版本 9 并创建了一个应用程序。我使用以下命令使这个应用程序通用：ng add @nguniversal/express-engine 然后我使用以下命令构建应用程序：npm run build:ssr && npm run serve:ssr

现在 dist 文件夹是用浏览器和服务器文件夹创建的，但在 dist 根目录中没有创建 server.js 文件，而且当我用 angular 9 构建应用程序时，也没有创建 webpack 配置文件。请告诉我一个方法将我在 angular 9 上构建的新应用程序部署到 Firebase 云功能和托管

Answer 1

从 Angular 9 开始，您将拥有以下构建结构

\n\n

 dist            \n  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 server            \n  |    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.js and some other files like firebase analytics stuff       \n  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 browser                \n       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.html and all files for the broswer \n

\n\n

现在为了测试这一点，您需要从项目根目录发出以下命令

\n\n

node dist/server\n

\n\n

这将调用服务器文件夹中的 main.js 文件，并且您的应用程序将在本地提供服务。有关 localhost url 和端口的信息将打印在屏幕上。

\n\n

现在为了部署到 firebase 使用以下代码

\n\n

import * as functions from \'firebase-functions\';\nimport * as path from \'path\';\n\nconst app = require(path.resolve(__dirname, "./dist/server/main")).app; // change the path according to your project structure\nconst myApp = functions.https.onRequest(app());\n

\n\n

你将有一个 myApp 函数，你可以在其中访问你的 Angular SSR 应用程序

\n\n

[更新]

\n\n

没有固定的地方可以初始化函数。dist/server/main重要的是myApp 函数中的路径是正确的

\n\n

我忘记提及的另一件事是，您必须将 package.json 托管字段更新为以下配置 =>

\n\n

  ...\n  "hosting": [{\n        "target": "app",\n        "public": "/dist/browser", // change it according to your directory structure\n        "rewrites": [{\n            "source": "**",\n            "function": "myApp"\n        }]\n  }]\n  ...\n

\n\n

希望能帮助到你 ;）

\n