firebase托管的Angular2应用程序显示空白页面

Question

我开发了一个angular2应用程序。我运行firebase托管程序。但它显示的是默认页面而不是我的应用程序。

请帮忙

Answer 1

使用ng build --prod构建应用后，它将创建一个包含生产文件的dist文件夹。运行firebase init时，您需要将公共目录设置为dist，而不是使用默认的public/目录。

Answer 2

我遇到过类似的问题。我多次重新部署应用程序并且总是得到相同的结果，如上图所示。

<强>问题：

如果您不选择dist作为公共目录，如果您以后替换 index.html。然后Firebase 覆盖项目中的index.html 。

<强>解决方案：

我通过替换 index.html与另一个项目中的一个解决了这个问题。

下次按照以下说明操作：

https://angularfirebase.com/lessons/deploying-an-angular-app-to-firebase/

Answer 3

首先找出您的index.html文件在哪个文件夹中，请确保它是您编写的index.html，因为firebase可能会将模拟index.html放在“ public”文件夹中，然后将index.html移到'dist'文件夹，它也可能在'dist'文件夹中还有另一个文件夹，其中包含您的应用程序名称。因此，要么复制原始的index.html并将其放置在模拟位置的“ public”文件夹中，要么进入firebase.json文件并将“ public”属性更改为index.html所在的文件夹的名称文件是：

 {
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

OR

 {
  "hosting": {
    "public": "my-app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

还要检查index.html文件中的基本引用，如果它是<base href="/">，则将其更改为应用程序的名称，例如<base href="/my-app/">，您也可以使用命令行来进行操作，只需编写：ng build --prod --base-href /my-app/