我正在寻找有关如何在我的 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
但是在这样做之后，这就是我所拥有的。
【问题讨论】：
标签： angular firebase-hosting firebase-tools
您可以检查是否创建了 firebase.json 和 .firebaserc 文件。如果没有，此解决方案适合您。
第 1 步：在您部署 firebase 并且它不工作后，您可以创建 firebase.json 文件并粘贴此代码：
{ "database": {
"rules": "firebase_rules.json"},
"hosting": {
"public": "dist/"yourdistfilename",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
第 2 步：创建 firebase_rules.json 并粘贴此代码：
{ "rules": {
".read": false,
".write": false
}
}
请注意，您将文件命名为 firebase.json 和 firebase_rules.json
第 3 步：在终端中运行这个 firebase 初始化数据库。此问题将出现并跟随答案。
第 4 步：然后您会注意到 .firebaserc 已创建。
第 5 步：您需要再运行一次 firebase init 和 firebase deploy。现在你终于可以看到你的项目了！
虽然不多，但希望能有所帮助。
【讨论】：
当我在网络上使用ctrl+shift+R 硬重置清除缓存时，它起作用了！确保在 firebase 上部署了正确的 index.html 文件。
【讨论】：
如果你没有单页应用（比如我），当 Firebase 询问时
File dist/apps/ditectrev/index.html already exists. Overwrite?
写N。我试了很多次才弄明白
【讨论】：
以下是在 firebase 上托管 angular6.0 应用程序的分步过程
1]npm install -g firebase-tool安装firebase工具
2] firebase login 使用 CLI 工具登录 Firebase。
连接到我们的帐户/Gmail 帐户后，我们将在浏览器中收到 firebase CLI Login Successl 消息
3]firebase init
以下是 Firebase 工具将提出的问题的答案：
？你准备好继续了吗？ 是的
?您有哪些 Firebase CLI 功能 想要设置这个文件夹？按 Space 选择功能，然后 输入以确认您的选择。 托管：配置和部署 Firebase 托管网站？你想用什么作为你的公共目录？ dist
(This is important! Angular creates the dist folder.)？配置为单页应用程序（将所有 url 重写为 /index. html)? 是的
4]ng build --prod
这将在我们的项目中创建一个全新的 dist/ 文件夹，其中包含 启动我们的应用所需的文件。
5] 在部署应用程序之前，转到 firebase.json 文件并像这样指定您的项目公共字段
"public": "dist/your_project_name",
6] 现在使用以下命令在 firebase 中部署项目
firebase 部署
解压后会收到如下信息
- 部署完成！
项目控制台：https://************ [你会得到实际的 url 名字而不是星星]
Hosting URL: https://************* [你会得到实际的 url 名称 而不是星星]
您可以通过 Hosting URL 中给出的 URL 访问该网站
【讨论】：
问题是关于问题的
文件 dist/apps/ditectrev/index.html 已经存在。覆盖？
如果您输入 Y 表示是，那么它将创建自己的 index.html 文件，由 Firebase 生成。给出这个 N 表示否，我能够保留我原来的 index.html，它是在 dist/apps/ditectrev 中使用 ng build --prod 后生成的。注意：我使用的是 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",
【讨论】：
在我删除缓存并刷新浏览器后它对我有用，谢谢。
【讨论】：
第二种可能的方法是将angular.json中的outputPath更改为dist，因此该行将如下所示"outputhPath": "dist"
【讨论】：
我发现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
【讨论】：
dist 中的新文件夹。我最近推出了一个新的guide for Angular on Firebase，你可能会觉得有趣。