我正在寻找有关如何在我的Angular 6.0项目上正确设置firebase-tools托管的教程，但我发现的内容总是像这样。
我正在寻找有关如何在我的Angular 6.0项目上正确设置firebase-tools托管的教程，但我发现的内容总是像这样。
- firebase init
- then select the Hosting
- What do you want to use as your public directory? dist
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- Overwrite? No
- ng build --prod
- firebase deploy
我发现执行ng build --prod命令会在项目位置下创建一个dist文件夹和另外一个子文件夹。
dist
|--TheProject_Folder
| |--assets|index.html - This index html is not using.
|--index.html - This is the html generated in the firebase init
所以我做的是重新初始化firebase init并将公共目录从dist更改为dist/TheProject_Folder：
- What do you want to use as your public directory? dist/TheProject_Folder
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- Overwrite? No
以下是在Firebase上托管Angular 6.0应用的逐步过程：
1] npm install -g firebase-tool 安装Firebase工具
2] firebase login 使用CLI工具登录Firebase。
连接到我们的帐户/Gmail账户后，我们将在浏览器中收到firebase CLI登录成功消息
3] firebase init
以下是Firebase工具将要问的问题的答案:
? 您是否准备好继续？Yes
? 您要为此文件夹设置哪些Firebase CLI功能？按空格选择功能，然后按Enter确认您的选择。Hosting: Configure and deploy Firebase Hosting sites? 您要将什么用作公共目录？dist
(这很重要！Angular会创建dist文件夹。)? 将其配置为单页应用程序（将所有URL重写为/index. html）？Yes
4] ng build --prod
这将在我们的项目中创建一个全新的dist/文件夹，其中包含启动应用所需的文件。
5] 在部署应用程序之前，请转到firebase.json文件并像这样指定项目公共字段
"public": "dist/your_project_name",
6] 现在使用以下命令在Firebase中部署项目：
firebase deploy
部署后，您将收到以下消息：
- 部署完成!
项目控制台: https://************ [您将获得实际的URL名称而不是星号]
托管URL: https://************* [您将获得实际的URL名称而不是星号]
您可以通过托管URL中提供的URL访问网站
我在清除缓存并刷新浏览器后，它对我起了作用。谢谢。
"outputPath": "dist"。ctrl+shift+R 硬重置清除缓存后，它就可以工作了！确保正确的 index.html 文件被部署在 Firebase 上。{ "database": {
"rules": "firebase_rules.json"},
"hosting": {
"public": "dist/"yourdistfilename",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
步骤2：创建firebase_rules.json并粘贴以下代码：
{ "rules": {
".read": false,
".write": false
}
}
如果您键入 Y 以确认，那么它将创建自己的 index.html 文件，由 Firebase 生成。如果您键入 N 不确认，则可以保留原始的 index.html，该文件是在使用文件 dist/apps/ditectrev/index.html 已经存在。要覆盖吗？
ng build --prod 在 dist/apps/ditectrev 中生成的。注意：我正在使用 Nx 工作区，但对其他 Angular 项目也适用。在普通的 Angular 项目中，路径会有所不同，只需使用 dist 即可。还有一个问题可能导致出现这个页面。当我们使用
firebase init
命令并按照流程操作时，默认情况下会覆盖index.html文件。 因此，如果已经构建了（以获取dist/_Project_Folder），则index.html文件将被覆盖。 在此之后再次构建它。
firebase init
ng build --prod
@bajran可能已经详细阐述了所有步骤，但如果您正在从Angular 5迁移到6，则唯一重要的步骤是在firebase.json中将"public": "dist"更改为"public": "dist/your_project_name"。
如果你没有单页应用程序（像我一样），当Firebase询问时
File dist/apps/ditectrev/index.html already exists. Overwrite?
写N。我之前尝试了很多次才弄明白。
dist文件夹中添加了新文件夹。最近我发布了一个关于Angular在Firebase上的新指南（https://pwa.ng/），你可能会感兴趣。 - abraham