refreshing the page results in 404 error- Angular 6

Question

I am building an application with the help of Angular6 and facing problems in routing. All the routes are working when I click on a particu

Answer 1

If you are using cpanel then it is easy to solve this issue.

Go to Advanced Options

Step 1: Go to Error Pages.

Step 2: Copy your index.html code and paste it in 404.shtml.

That's it technically all your routes are redirected to index.html file. That's what angular wants :) and everything will work normal.

Here are some reference links

Namecheap Error Page Config

Godaddy Error Page config

Answer 2

You will see in your example url, that once you get the 404 error you can't make it work, but if you include a hash before the angular-specific url like /#latest it will work.

Why stops working when refreshing? your webserver is intercepting the GET request from your browser and is trying to go directly to the directory /latest, which doesn't exist. It doesn't know that it needs to go to /bosv2, find an angular app, and then add the small ending bit to your path which is a not-real directory but a routing for angular. In your local it would work as when you are doing ng serve, webpack webserver is prepared for this, but not the host where you are hosting the app.

By default, angular is using HTML5 style navigation, but with your current webserver settings you would need the old angularjs style (with hash#).

From here, you have two solutions:

1. Change your webserver configuration

2. Tell Angular to use HashLocationStrategy (perfectly valid solution), you can go old-school with the HashLocationStrategy by providing the useHash: true in an object as the second argument of the RouterModule.forRoot in the AppModule.

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

I would say going the hash style has a couple of downsides, which may not be relevant in your scenario:

1. It doesn't produce the clean and SEO Friendly URLs that are easier for users to understand and remember.
2. You can't take advantage of the server-side rendering.

Hope you find this answer helpful :)

Answer 3

Refetch data on same URL navigation

imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],

Answer 4

In app.module.ts

import {LocationStrategy, HashLocationStrategy} from '@angular/common';

After import add following line to providers.

{provide: LocationStrategy, useClass: HashLocationStrategy}

ex:

providers: [AuthService, 
            AuthGuard, 
            FlxUiDataTable,
            {provide: LocationStrategy, useClass: HashLocationStrategy}]

This will solve your issue. Read Documentation here.