Page not found when reloading Angular page on Firebase

Question

I've deployed my angular app to firebase. I can see the sign in page fine but I get the following error when I reload the page:

This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.

Why am I seeing this?

You may have deployed the wrong directory for your application. Check your firebase.json and make sure the public directory is pointing to a directory that contains an index.html file.
You can also add a 404.html in the root of your site to replace this page with a custom error page.

So as the error suggests I checked my firebase.json file and it displays this:

{
  "firebase": "******",
  "public": "dist",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

Here you can see that my public folder is my dist folder. This dist folder is actually where I place all of my files (css,js,html and the index.html) when gulp builds it all. The folder structure looks like this:

dist
  css
  images
  js
  templates
  index.html

So the destination folder above does have an index.html page - so why am I getting this error? Angular should be stepping in here and handling all routing but that doesn't seem to be the case.

EDIT

Answer 1

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