如何使用Firebase函数部署Angular 9通用应用程序

Question

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

现在，dist文件夹中已创建具有浏览器和服务器文件夹的文件夹，但是在构建Angular 9应用程序时未在dist根目录中创建server.js文件，并且也未创建webpack配置文件。 请告诉我如何将我的新版Angular 9通用应用程序部署到Firebase云函数和托管中。

- jayneet porwal

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网址和端口的信息将打印在屏幕上。

现在，为了部署到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应用程序。

[更新]

并没有固定的位置来初始化你的函数。唯一重要的是在myApp函数中路径dist/server/main是正确的。

还有一件事我忘了提到，那就是你需要将package.json中的hosting字段更新为以下配置 =>

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

希望能对你有所帮助；)

- Harkal

---

为了构建和运行您的SSR，请使用以下命令=> ng build --prod --project={您的项目名称，也要删除大括号} && ng run {再次输入您的项目名称}:server:production && node dist/server/main.js。我之所以要求您这样做，是因为我在同一目录下有多个项目，当我添加新项目时，我的package.json文件会混乱，并且只能构建最新的应用程序而不是旧的应用程序，因此如果您也有多个项目，请使用该命令。此外，请告诉我您的构建目录结构是否与我所示相同。 - Harkal

展示你的 main.server.ts 文件。我之前也问过这个文件，但你没有给我看。 - Harkal

我在下面的文件中写了一个注释和更多的解释。 - Lagistos

重写没问题，我也在控制台看到函数在刷新除基本路由以外的任何路由时运行。 - Lagistos

ng deploy - 全新功能 - https://github.com/angular/angularfire/blob/master/docs/deploy/getting-started.md - Jonathan