在Firebase上托管Angular项目

Question

我正在尝试将我的Angular(5)项目托管在Firebase上，我能够部署我的应用程序，但当我这样做时，这就是主机在我的项目URL上显示的内容：

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

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

此外，我之前运行了 ng build --prod --aot=false 命令，在我的 Angular 项目下的“dist”文件夹中构建了一个生产文件夹。为什么我的项目没有显示在 URL 上？dist 文件夹的结构如下：

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

- FrankTheTank

---

从那个文件夹的外观来看，index.html已经被更改了。当你运行 firebase init 命令时，它是否询问你是否要重写 index.html，因为它已经存在了？ - Drei

我尝试过了，但是应用程序没有工作，所以我用我的实际index.html文件替换了它，看看是否有任何变化，但仍然是那个屏幕，这对我来说很奇怪，因为显示该屏幕的代码甚至不存在。 - FrankTheTank

是的，替换index.html文件不起作用，因为它必须由angular编译。我建议重新构建项目，然后仅运行“firebase deploy”。如果仍然没有成功，需要更多信息，因为在那一点上似乎不是firebase问题。 - Drei

我用上面最后一张图片中的参数重新初始化了Firebase，但仍然存在同样的问题。 - FrankTheTank

在使用这些设置运行init之后，您将不需要再次运行init。如果deploy继续无法正常工作，您需要提供更多信息。 - Drei

Answer 1

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

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

你需要使用 dist 文件夹，因为当你执行 ng build --prod 命令时，这是生产文件所在的文件夹。

- etrupja

Answer 2

步骤1：ng build --prod 在src/app/执行完步骤1后，将创建/更新包含部署/托管内容的dist文件夹

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

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

- vbrgr

Answer 3

我将 Angular 7.2.15 部署到 Firebase 的步骤：

1. 运行 firebase init

   • 您是否准备好继续？ 是
   • 要设置哪些 Firebase CLI 功能以用于此文件夹？按空格选择功能，然后按 Enter 确认您的选择。 Hosting：配置和部署 Firebase Hosting 网站
   • 您要使用什么作为公共目录？ dist
   • 将其配置为单页应用程序（将所有 URL 重写为 /index.html）吗？ 是
   • 文件 dist/index.html 已存在。要覆盖吗？ 否 跳过写入 dist/index.html

2. 然后执行：

   ng build --prod

之后项目将具有以下结构：

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

2. 然后，您应该将 myapp/dist/myapp 中的所有文件复制到 dist/myapp 中。

3. 然后运行 firebase deploy

- StepUp

Answer 4

你能提供你的应用程序的完整目录树吗？

我有一个在Firebase Hosting上托管的Angular应用程序，我的firebase.json与你的类似，但不包含这一行：

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

这可能是一个解决方案...或者不是。这取决于您的目录树。请分享您的目录树以进行比较。

- olivejp