When I refresh my website I get a 404. This is with Angular2 and firebase

Expanding on the accepted answer I wanted to show that the rewrites rules go inside of the hosting rules. in the firebase.json

"hosting": {
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
   } ]
}

Firebase also has an updated docs page where the above example is from.

Also, I was thrown off by the hash (#) question around this. I found that doesn't apply to the new Angular. Making these small changes in the firebase.json, rebuilding, publishing to firebase, and then doing a refresh page with clear-cache immediately resolved my 404 issue with no workarounds required for hashes in the URL.


For Firebase Hosting the documentation on redirects and rewrites is here: https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html

From there:

Use a rewrite when you want to show the same content for multiple URLs. Rewrites are particularly useful with pattern matching, as you can accept any URL that matches the pattern and let the client-side code decide what to display.

You're likely looking for the first rewrite sample on that page:

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

This is an instruction for the web server to serve /index.html for any incoming request, no matter what the path is.