在Firebase上托管Angular項目

Question

我正在嘗試在Firebase上托管我的Angular（5）項目，並且我能夠部署我的應用程序，但是當我這樣做時，主機在我的項目URL中顯示：

我似乎能夠使用Firebase部署托管服務，但它實際上並沒有使用我的Angular項目，而只是一個默認的Firebase托管屏幕。 我的firebase.json文件目前設置如下：

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

另外，我事先運行了build --prod --aot = false來在'dist'下的角度項目中構建一個生產文件夾。 為什么我的項目沒有顯示在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中，您需要在公共屬性中添加項目名稱。

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

您需要dist因為這是執行ng build --prod命令時可以找到生產文件的文件夾

Answer 3

步驟1： ng build --prod在src / app / - > dist文件夾中的步驟1之后將創建/更新部署/托管內容

第2步：firebase部署-p dist / <在此處輸入您的項目名稱> ex :(測試是項目名稱）： firebase deploy -p dist / test

在第二步將dist文件夾中的文件部署到firebase托管（因為你可以在firebase控制台中看到這些文件）

Answer 4

我將Angular 7.2.15部署到Firebase的行為：

1. 運行firebase init

   • 你准備好了嗎？ 是
   • 您要為此文件夾設置哪些Firebase CLI功能？ 按Space鍵選擇功能，然后按Enter確認您的選擇。 托管：配置和部署Firebase托管站點
   • 你想用什么作為你的公共目錄？ 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