Page not found when reloading Angular page on Firebase

2018 and had the samed problem. Katana24 gave a good answer but since then, firebase updated a bit. Here is the Katana24 answer updated :

firebase.json:

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

I fixed the problem - this problem is caused by Firebase (indeed all servers I think) believing that each Angular state is a folder which should contain its own index.html file - obviously this isn't the case.

What needs to happen is for it to only refer to our index.html in the root of the folder. To do that you need to modify your firebase.json file to the following:

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

The important parts here are the rewrites and the source objects. Refer to the firebase.json explanation page for more info on this: firebase.json

If you use firebase-tools you can hit y (yes) at the question:

Configure as a single-page app (rewrite all urls to /index.html)?