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

Question

我最近更新到最新的 Angular 版本 9 并创建了一个应用程序。 我使用以下命令使这个应用程序通用： ng 添加@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 开始，您将拥有以下构建结构

 dist            
  ├── server            
  |    └── main.js and some other files like firebase analytics stuff       
  └── browser                
       └── index.html and all files for the broswer 

现在为了测试这个，你需要从你的项目根目录中给出以下命令

node dist/server

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

现在为了部署到 Firebase，请使用以下代码

import * as functions from 'firebase-functions';
import * as path from 'path';

const app = require(path.resolve(__dirname, "./dist/server/main")).app; // change the path according to your project structure
const myApp = functions.https.onRequest(app());

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

[更新]

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

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

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

希望对你有帮助；）