Question

我正在寻找有关如何在我的角度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

但在这之后，这总是我所拥有的。

Answer 1

我发现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

Answer 2

下面是在Firebase上托管angular6.0应用的分步过程

1] npm install -g firebase-tool安装Firebase工具

2] firebase login使用CLI工具登录Firebase。

连接到我们的帐户/ Gmail帐户后，我们将在浏览器中收到 firebase CLI登录成功消息

3] firebase-init

以下是Firebase工具会问的问题的答案：

？您准备好继续了吗？是
  ？您有哪些Firebase CLI功能   要为此文件夹设置？按空格键选择功能，然后   输入以确认您的选择。 托管：配置和部署Firebase   托管网站

？您想使用什么作为公用目录？ dist (This is important! Angular creates the dist folder.)

？配置为单页应用程序（将所有网址重写为/ index。   html）？是

4] ng build --prod

这将在我们的项目中创建一个全新的dist /文件夹，其中包含启动我们的应用程序所需的文件。

5]在部署应用程序之前，请转到firebase.json文件并指定您的项目公共字段，

"public": "dist/your_project_name",

6]现在，使用以下命令将项目部署到firebase中

firebase部署

解聚后，您会收到以下消息

部署完成！


项目控制台：https：// ************ [您将获得实际的URL   名称而不是星星]

托管网址：https：// ************* [您将获得实际的网址名称   而不是星星]

您可以通过托管网址中提供的网址访问网站

Answer 3

第二种可能的方法是将angular.json中的outputPath更改为dist，因此该行看起来像"outputhPath": "dist"

Answer 4

在删除缓存并刷新浏览器后，对我有用。

Answer 5

@bajran可能详细介绍了所有步骤，但是如果您要从角度5迁移到角度6，那么唯一重要的步骤是，在firebase.json中将"public": "dist",更改为"public": "dist/your_project_name",

Answer 6

还有另一个问题可以导致此页面相同。当我们使用

初始化项目时

firebase init

命令并按照该过程操作，默认情况下它将覆盖index.html文件。因此，如果已经构建（要获取dist / _Project_Folder），则index.html文件将被覆盖。

之后再次构建

firebase init 
ng build --prod

Answer 7

问题在于问题

文件dist / apps / ditectrev / index.html已经存在。覆盖？

如果您输入 Y表示是，则它将创建由Firebase生成的自己的index.html文件。赋予此 N否，我可以保留原来的 index.html ，该文件是在<div className={"table-responsive"+visibleClass}>中使用ng build --prod之后生成的。注意：我使用的是Nx工作区，但其他Angular项目也应如此。在正常的Angular项目情况下，这将是不同的路径，即只是dist/apps/ditectrev。

Answer 8

如果您没有像我这样的单页应用程序，则在Firebase询问

时

File dist/apps/ditectrev/index.html already exists. Overwrite?

写N。在弄清楚之前我已经尝试了很多次

Answer 9

当我通过ctrl+shift+R在网络上进行硬重置来清除缓存时，它起作用了！确保在Firebase上部署了正确的index.html文件。

Answer 10

您可以检查是否创建了 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 init 数据库。此问题将出现并跟随答案。

实时数据库安全规则应该使用什么文件？ firebase_rules.json
文件 firebase_rules.json 已存在。您想用实时数据库安全规则 (y/N) 覆盖它吗y（覆盖并更新到最新代码）

第 4 步：然后您会注意到 .firebaserc 已创建。

第 5 步：您需要再次运行 firebase init 和 firebase deploy。现在您终于可以看到您的项目了！

内容不多，但希望能有所帮助。

Angular 6.0 firebase托管部署无法正常工作

10 个答案: