How to fix Angular page refresh error #404 error

We can fix the 404 error or page refresh error using angular HashLocationStrategy. Simply follow the steps and fix the page refresh error in you angular application.

1. First open your project and search app.module.ts file. Then open that file and add the following line in import section.

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

2. Then bootom of the page you can see the providers next to importers setion. Inside the providers[] you just add the following line.

{provide: LocationStrategy, useClass: HashLocationStrategy}

3. The final output will be look like this.

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

4. The entire page will be like this

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HttpClientModule} from '@angular/common/http';
import { LayoutComponent } from './layout/layout.component';
import { FooterComponent } from './footer/footer.component';
import { FeaturesComponent } from './features/features.component';
import { PricingComponent } from './pricing/pricing.component';
import { ContactComponent } from './contact/contact.component';
import { AboutComponent } from './about/about.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { FormsModule }   from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent,
    LayoutComponent,
    FooterComponent,
    FeaturesComponent,
    PricingComponent,
    ContactComponent,
    AboutComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Then upload your project file into the live server and refresh the page. You can't able to see the 404 error now..