Search code examples
angularfirebaseangular-routingfirebase-hosting

How to disable firebase's 404 page for an angular app

I have an angular app which is deployed with firebase to production.

The App includes following redirect

const routes: Routes = [
  { path: '', component: HomeComponent },
  // some others
  { path: '**', redirectTo: '/' },
];

On local environment this works like required, an undefined path is redirected -> HomeComponent is visible.

On the deployed app, however, the user is redirected to a firebase 404 page

enter image description here

How can I disable the firebase page, so that the user sees the HomeComponent, when he tries to access a not existing page?

Solution

  • It sounds like you want to configure Firebase Hosting to serve all URLs to a single HTML file, typically index.html in the root of your deployment. In that case, you'll want to have this in your firebase.json as described in the documentation:

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

    See also: Firebase CLI: "Configure as a single-page app (rewrite all urls to /index.html)"