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.. 

How to make your Angular app SEO friendly

Let's see how we can add SEO to our Angular app easily using following steps

1. First open your app.component.ts file and import meta and title service. The example is below..

import { Meta, Title } from '@angular/platform-browser';

2. Then you can find the "export class LayoutComponent implements OnInit {}" line and add the following code inside the curly brases.

constructor(private titleService: Title, private meta: Meta) {

this.titleService.setTitle('Add Your Title Here - Learn Angular Fast');

this.meta.addTag({ name: 'description', content: 'Add your website description here' });

this.meta.addTag({ name: 'keywords', content: 'Add your website seo keywords here' });
}

3. Now the app.component.ts file output will be look like this.

import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

export class LayoutComponent implements OnInit {

constructor(private titleService: Title, private meta: Meta) {

this.titleService.setTitle('Learn Angular Fast - This is my blog title');

this.meta.addTag({ name: 'description', content: 'This is my blog description' });

this.meta.addTag({ name: 'keywords', content: 'How to learn angular Fast - This is my blog description' });

}

ngOnInit() {

}
}

4. Then repeat the same step for the remaining component files to add multiple keywords, title and description.