为什么在 Firebase 托管服务上部署我的 Angular 应用程序后，我得到了这个页面？

Question

我正在尝试在 Firebase 上部署一个 Angular 应用程序，但我发现了一些问题。

首先，我进入我的项目目录，然后通过以下方式构建我的生产项目：

developer@developer-virtual-machine:~/Documents/Angular-WS/color_patch$ ng build --prod

在正确构建项目之后，我将此文件夹结构放入项目的 dist 目录中：

此 /dist/ 文件夹包含构建过程输出（包括 index.html 文件）

那我就完成了：

firebase init

我选择了这个声音：托管：配置和部署 Firebase 托管站点

下面它问我：

1. 您想将什么用作 public 目录？ (public): 我写了 dist 因为这里创建了 color_patch 目录我必须部署的包

2. 配置为单页应用（重写所有url为/index.html）？我写的是

3. 文件 dist/index.html 已经存在。覆盖？ (y/N)我写的是

顺利完成

然后我进入我的项目目录并通过以下命令部署我的项目：

developer@developer-virtual-machine:~/Documents/Angular-WS/color_patch$ firebase deploy

它完成且没有错误（显示“部署完成！”）

如果我进入我的 Firebase 控制台，进入托管部分，我可以看到我的部署和上传的正确文件数。

问题是，在尝试访问我部署的应用程序的 URL 时，我现在正在获取包含此消息的页面，而不是我的 Web 应用程序：

为什么？怎么了？我错过了什么？

Answer 1

当您从 Firebase init 的 firebase 项目中获取项目时。

这就是您在文件夹中得到的内容。

在项目结构中存在index.html。这是 firebase 托管文档文件。

对于 Angular，您必须对部署进行少量更改。

喜欢对您的

进行更改

要么在你的 firebase 初始化项目中安装 angular 项目

或

你必须从 angular.json 提供 outputPath 因为你是 public 目录Firebase 项目。

然后 运行 在您的 angular 项目中执行命令：

ng build --prod

它将创建用于在您的 firebase 项目 public 文件夹中托管的文件。

然后 运行 命令：

firebase deploy

有关此的更多信息，您可以阅读此 documentation