Angular app deploy to firebase : 404 errors

Question

I'm trying to deploy my angular app to Firebase.

When I do it, I go to the hosting URL and i'm getting plenty of 404 errors (runtime.js, build.js etc..) and a blank page

I don't understand why, i did :

firebase init

chose storage/firestore/hosting

ng build

firebase deploy

when i do firebase serve, it's working... thats weird

(ps: angular 6.0.3, firebase 5.0.4)

my firebase.json (I had to add /hello which my project name because ng build in dist/hello -> "outputPath": "dist/hello",)

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ],
    "source": "functions"
  },
  "hosting": {
    "public": "dist/hello",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

Answer 1

You should set rewrites to ensure that it should rewrite all urls to index.html.

 {
      "firestore": {
        "rules": "firestore.rules",
        "indexes": "firestore.indexes.json"
      },
      "functions": {
        "predeploy": [
          "npm --prefix \"$RESOURCE_DIR\" run lint",
          "npm --prefix \"$RESOURCE_DIR\" run build"
        ],
        "source": "functions"
      },
      "hosting": {
        "public": "dist/hello",
        "ignore": [
          "firebase.json",
          "**/.*",
          "**/node_modules/**"
        ]
    "rewrites": [
          {
            "source": "**",
            "destination": "/index.html"
          }
        ]
      },
      "storage": {
        "rules": "storage.rules"
      }
    }