Search code examples
angulargithub-pages

Angular website hosted in Github pages does not work if I refresh in any route

I have an angular project hosted in GitHub pages which has a total of five routed links. When I load the website for the first time, it works perfectly fine and I can navigate through all these five links. However, trouble starts when I refresh in any of the route, even if it is the index/home route. What I noticed by enabling network tab while trying to debug is that on first load my js and css file points to https://nayan-jyoti.github.io/praktanchatrabharati-ssvnk/****.js while on refresh, it points to https://nayan-jyoti.github.io/****.js and throws 404 error.

Can someone help me what's wrong here?

Solution

  • This will probably fix your problem. Edit your app-routing.module.ts and make sure useHash is set to true:

    @NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})