Firebase Angular can’t refresh without useHash setting to true

Are you familiar with the error page below (see bottom of this post)? Well, I was too. This problem can happen with Firebase when you don’t want to use the useHash (the hashtag # in the url) in your app routing module. I am using Angular 10.0.3 here. Now what could be the issue is that when you initialized Firebase within the project with firebase init, you might have chosen to set the redirect all pages option to no, and well, and that was the issue for me. To resolve this issue once and for all, go to your firebase.json file and add the rewrites part.

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

If you are using something else rather than Firebase then you need to change your server settings where the mod rewrite executes. I would refer to this post on stackoverflow for more information which has information for some different servers: https://stackoverflow.com/posts/40833154/revisions

Error page below:

Page Not Found

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.

Leave a comment

Your email address will not be published. Required fields are marked *