在 Firebase 上托管 Angular 项目

Posted 2023-03-04

【中文标题】在 Firebase 上托管 Angular 项目

【英文标题】：Hosting Angular Project on Firebase

【发布时间】：2018-09-17 12:20:41

【问题描述】：

我正在尝试在 Firebase 上托管我的 Angular(5) 项目，并且我能够部署我的应用程序，但是当我这样做时，主机会在我的项目 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 的配置：

【问题讨论】：

你跑firebase deploy了吗？

是的，它部署成功，但网页只显示我帖子中的第一张图片，而不是我实际的 Angular 应用程序

从该文件夹的外观来看，index.html 已更改。当您运行firebase init 时，当它要求重写 index.html 因为它已经存在时，您是否说“不”？

我做了，但应用程序没有工作，所以我用我的实际文件替换了那个 index.html 文件，看看是否有任何变化，但它仍然是那个对我来说很奇怪的屏幕，导致代码显示那个屏幕甚至都不存在

是的，替换 index.html 文件是行不通的，因为它必须通过 Angular 编译。我建议重建项目，然后只运行firebase deploy。如果您仍然没有运气，则需要更多信息，因为此时它似乎不是 Firebase 问题

【参考方案1】：

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

运行firebase init

准备好继续了吗？ 是的 您要为此文件夹设置哪些 Firebase CLI 功能？按 Space 选择功能，然后按 Enter 确认您的选择。 托管：配置和部署 Firebase 托管站点 您想使用什么作为您的公共目录？ 分布 配置为单页应用程序（将所有 url 重写为 /index.html）？ 是的 文件 dist/index.html 已经存在。覆盖？ 没有 跳过 dist/index.html 的写入

然后：

ng build --prod

之后项目结构如下：

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

然后您应该将所有文件从myapp/dist/myapp 复制到dist/myapp。

然后运行firebase deploy

【参考方案2】：

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

第 2 步：firebase deploy -p dist/ 例如：（测试是项目名称）：firebase deploy -p dist/test

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

【参考方案3】：

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

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

您需要dist，因为这是您在执行ng build --prod 命令时可以找到生产文件的文件夹

【参考方案4】：

您能否提供您应用的完整树目录？

我有一个托管在 Firebase Hosting 中的 Angular 应用程序，我的 firebase.json 与您的类似，但不是这一行：

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

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