Route in Angular throws 404 resource not available when refreshed

Question

I deployed my angular application in tomcat, built using ng build --prod --base-href=/myapp/, when i try to access a specific route like http://localhost:8083/myapp/home using [routerLink]="['/home'] it works fine, but when try to refresh the page or access directly http://localhost:8083/myapp/home from the browser, i get HTTP Status 404 The requested resource [/myapp/home] is not available, below is my routing configuration :

const routes: Routes = [
  { path: 'myapp', redirectTo: "/home", pathMatch: "full" },
  { path: 'home', component: HomeComponent }
];

Update :

I've added below configuration in tomcat, and the 404 error is gone, but now when i refresh the page i'm redirected to default route which is myapp, while i'm supposed to be redirected to the current route :

<error-page> 
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>

You would need to configure tomcat to redirect all requests (404 errors) to index.html since you app is a single page application — Michael Doye
yah that works, but when i'm in another route other then 'home', and i refresh i'm redirected to default route which is myapp — Bilal Dekar
Unfortunately, I have never used tomcat to host a single page application so I wouldn't know how to fix that. But I would imagine you just need the "right" configuration for the tomcat server — Michael Doye

Bilal Dekar Bilal Dekar · Accepted Answer · 2021-10-17T12:11:50

I solved this by changing <base href="/"> in index.html to <base href="./">

or directly specifying ./ in build :

ng build --prod --base-href=./

Route in Angular throws 404 resource not available when refreshed

1 Answers