Question

我正在尝试在Firebase上托管我的Angular（5）项目，并且我能够部署我的应用程序，但是当我这样做时，主机在我的项目URL上显示：

我似乎能够使用Firebase部署托管服务，但它实际上并没有使用我的Angular项目，而只是一个默认的Firebase托管屏幕。我的firebase.json文件目前设置如下：

＆＃13;

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

＆＃13;

此外，我事先运行了build --prod --aot = false，以便在我的角度项目中在＆＃39; dist＆＃39;下构建一个生产文件夹。为什么我的项目没有显示在URL上？ dist文件夹结构如下：

此外，这是我设置Firebase init的配置：

Answer 1

可以提供应用程序的完整目录吗？

我在Firebase Hosting中托管了一个Angular应用程序，而我的firebase.json与您的相似，但与以下内容不同：

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

可能是解决方案……还是没有。这取决于您的目录树。请共享您的目录树进行比较。

Answer 2

在Angular 6中，您需要在公共属性中添加项目名称。

module

您需要{ "hosting": { "public": "dist/projectName", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }，因为这是执行dist命令时可以在其中找到生产文件的文件夹

Answer 3

第1步： ng构建--prod 在src / app /->带有部署/托管内容的dist文件夹中的步骤1之后，将创建/更新

步骤2：firebase deploy -p dist / <在此处输入您的项目名称> 例如：（测试是项目名称）： firebase deploy -p dist / test

第二步，将dist文件夹中的文件部署到Firebase托管（因为您可以在Firebase控制台中看到此文件）

Answer 4

我将Angular 7.2.15部署到Firebase的操作：

运行firebase init
- 您准备好进行了吗？是
- 您要为此文件夹设置哪些Firebase CLI功能？按空格键选择功能，然后按Enter确认选择。 托管：配置和部署Firebase托管网站
- 您要将什么用作公用目录？ dist
- 配置为单页应用程序（将所有URL重写为/index.html）？是
- 文件dist / index.html已存在。覆盖？否跳过dist / index.html
然后：

ng构建--prod

之后，该项目具有以下结构：

-.firebase
-dist
 - myapp
-node_modules
-myapp
  - dist
    -myapp
-public
-.firebaserc
-.gitignore
-.firebase.jsom
-package-lock.json

然后，您应该将myapp/dist/myapp中的所有文件复制到dist/myapp中。
然后运行firebase deploy

在Firebase上托管Angular项目

4 个答案: