404 Error on refresh for angular(v4+) deployed on

Question

I have deployed an angular application with lazy loading. The application works perfectly when hosted on Github.io domain but I am getting an error when I deployed the app on tomcat server using mobaxterm. When the page reloads or refreshes the app loses the routing state and throws a 404 error.

HTTP Status 404 - /enquiry

type Status report

message /enquiry

description The requested resource is not available.

Apache Tomcat/7.0.72

Console-Log:: GET http://appv2.proctur.com/enquiry/addEnquiry 404 (Not Found) Navigated to http://appv2.proctur.com/enquiry/addEnquiry

If I do not refresh the page and use the app in one go then its OK, just fail to understand what the issue is on refresh.

PS:: this is my first time hosting an angular application on tomcat server if I made any silly mistake please let me know.

For better clarification, I am adding the routing.module.ts where I lazy load the modules. This is imported into app.module.ts::

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: '/authPage', pathMatch: 'full' },
        { path: 'authPage', loadChildren: 'app/components/auth-page/auth-page.module#AuthPageModule' },
        { path: 'course', loadChildren: 'app/components/course/course.module#CourseModule' },
        { path: 'enquiry', loadChildren: 'app/components/enquiry/enquiry.module#EnquiryModule' },
        { path: 'student', loadChildren: 'app/components/students/student.module#StudentModule' },
    ])
],
exports: [
    RouterModule
]
})
export class AppRoutingModule {
}

Answer 1

When angular app load first-time url will serve from a server. when you navigate pages then it handled at client side. when you refresh the page then request will go to server(tomcat or node). but that routed url doesn't exist on server. then comes 404 error. you can resolve by HashLocationStrategy, added {useHash: true} object in routing configuration ie.

RouterModule.forRoot(routes, {useHash: true})

More details:- https://codecraft.tv/courses/angular/routing/routing-strategies/#_hashlocationstrategy

Answer 2

The previous answer is correct, but we don't really need hashes in our url-s. The problem is as follows: For example, if we have a route named '/users/all', and navigate there from '/' inside our app, then it is perfectly okay, as Angular's own router will resolve the route and display the page, but if we go directly to that route, e.g. by typing in the url in the browser's address bar, we'll get 404, Why? Because your server (tomcat in your case) will try to find a folder named 'users' and an 'all' file inside it, which, obviously, is non-existent, as it is merely an Angular route, not an actual file inside your server's system. But you can configure your server in a way, the it will fallback to your index.html file, which contains the app, so the pages will be displayed correctly (in the case of our example, the server will return index.html, then the Angular app will run and resolve the route). Read more about this here.