When reload the page I got 404 error for angular 10.

I am using angular application; I have no problem in
running on localhost when I hosted my application on server. When I clicked the
employee button it loads the employee details. However I refreshed the same
page, I gives me 404 file or directory not found error.

 

I have fixed the following issue using hash approach.
This will make the links look like http://domain.com/#/page
for the url  http://domain.com/page.

In app.module.ts, we need to import HashLocationStrategy,
LocationStrategy. And then in NgModule
Provider add {{provide: LocationStrategy, useClass:
HashLocationStrategy}}.

App.Module.Ts

  

import {
BrowserModule } from '@angular/platform-browser';

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

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

 

@NgModule({

declarations: [

  AppComponent,

 

],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule,

  ],

  providers: [SharedService,{ provide:
LocationStrategy, useClass: HashLocationStrategy}],

  bootstrap: [AppComponent]

})

export class AppModule { }