Angular routing not working i firebase hosting

Question

I have a Angular project where routing works in localhost, but when I deploy my project to Firebase hosting only the base-url works. Here is my routing: Example https://baseurl/jegharaldrigkategori does not work in Firbase hosting. It says "Page not found"

  const routes: Routes = [
  {
      path: '',
      redirectTo: 'home', 
      pathMatch: 'full'
  },
  {
    path: 'home', 
    component: HomeComponent
  },
  {
    path: 'jegharaldrigkategori', 
    component: JegharaldrigkategoriComponent
  },
  {
    path: 'jegharaldrig', 
    component: JegharaldrigComponent
  },
  {
    path: 'udfordring', 
    component: UdfordringComponent
  },
  {
    path: 'terning', 
    component: TerningComponent
  },
  {
    path: 'overunder', 
    component: OverunderComponent
  }
];

What does your firebase.json config look like? Is it setup to serve index.html for all paths? — abraham
– abraham, Commented Mar 22, 2020 at 20:48

Segev -CJ- Shmueli · Accepted Answer · 2020-04-01 03:02:13Z

11

When hosting on firebase you must remember to redirect all calls to index.html.

The hosting portion of your firebase.json should include "rewrites", here's an example :

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

answered Apr 1, 2020 at 3:02

Segev -CJ- Shmueli

1,62116 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sayandeep Majumdar Over a year ago

I got the same error. I did this in firebase.json & firebase 404 page is not showing up. But now my theme's 404 error page is opening. But in my route there is a valid URL. Any solution for this?

samuelnihoul Over a year ago

Can you rephrase @Sayandeep?

Collectives™ on Stack Overflow

Angular routing not working i firebase hosting

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related