Page not found when reloading Angular page on Firebase

Question

I deployed the angular app for firebase. I see that the character on the page is fine, but I get the following error when reloading 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. 

Since the error tells me that 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 put all my files (css, js, html and index.html) when gulp builds it all. The folder structure is as follows:

 dist css images js templates index.html 

So the destination folder above has an index.html page - so why am I getting this error? angular should be here and handle all the 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 the servers that I think), assuming that each Angular state is a folder that should contain its own index.html file - obviously this is not so.

What should happen is just to mention our index.html in the root of the folder. To do this, you need to change the 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 rewriting and source objects. See the firebase.json explanation firebase.json for more information on this: firebase.json

Answer 2

2018 and had the same problem. Katana24 gave a good answer, but since then the database has been updated a bit. Here is the updated Katana24 answer:

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" } } } 

Answer 3

If you use firebase-tools, you can press y (yes) to the question:

Configure as a one-page application (rewrite all URLs in /index.html)?