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

Question

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

I've deployed to firebaseapp with my Angular2 app.

Routes seem to change fine but when I refresh the browser it redirects me to 404 page.

When I refresh locally this doesn't happen.

Am I missing any route settings or Firebase settings?

This is my firebase.json file:

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

Answer 1

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.