Angular 2 Routing - Visual studio 2017, getting HTTP Error 404.0 - Not Found when refreshing the url in browser

Question

I have below code which is working fine in all browsers upon launching the application except while refreshing the page, immediately I'm getting HTTP 404-Not Found Issue. In angular, don't know the exact reason and solution.

Following are my components in my application:

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './main.html',
})
export class AppComponent { }

main.html

<div>
<nav>
    <ul class=" nav nav-pills">
        <li routerLinkActive="active"> <a 
 routerLink="/checkifc">checkifc</a></li>
        <li routerLinkActive="active"><a 
 routerLink="checkmaterial">checkmaterial</a>
        <li routerLinkActive="active"><a 
 routerLink="checkcosts">checkcosts</a>
    </ul>

    <router-outlet></router-outlet>

 </nav>
</div>

app.routes.ts

import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { CheckifcComponent } from './checkifc/checkifc.component';
import { CheckmaterialComponent } from 
'./checkmaterial/checkmaterial.component';
import { CheckcostsComponent } from './checkcosts/checkcosts.component';

export const routes: Routes = [
{ path: 'checkifc', component: CheckifcComponent },
{ path: 'checkmaterial', component: CheckmaterialComponent },
{ path: 'checkcosts', component: CheckcostsComponent },
//{ path: '', redirectTo: '/checkifc', pathMatch: 'full' }];

export const routing = RouterModule.forRoot(routes);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http, Response } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { routing } from './app.routes';
import { AppComponent } from './app.component';
import { CheckifcComponent } from './checkifc/checkifc.component';
import { CheckmaterialComponent} from 
 './checkmaterial/checkmaterial.component';
 import { CheckcostsComponent } from './checkcosts/checkcosts.component';
 import{ ifcobjecttypeComponent} from './ifcobjectType.component'

 @NgModule({
imports: [BrowserModule, routing , FormsModule, HttpModule,],
declarations: [AppComponent, CheckifcComponent, CheckmaterialComponent, 
 CheckcostsComponent, ifcobjecttypeComponent ],
bootstrap: [AppComponent]})
 export class AppModule { }

following are the components where routing is implemented for

checkifc.component.ts

import { Component, OnInit} from '@angular/core';
import { Ifc } from './ifc';
import { BimService } from './bimifc.service';

@Component({
selector: 'checkifc',
templateUrl: './checkifc.html',
providers: [BimService]})

//implementing the class OnInit
export class CheckifcComponent implements OnInit {
ifcprops: Ifc[];}

checkifc.html

checkcosts.component.ts

import { Component, OnInit } from '@angular/core';
import { Costs } from './costs';
import { BimService } from './bimcosts.service';

@Component({
selector: 'checkcosts',
templateUrl: './checkcosts.html',
providers: [BimService]})

 export class CheckcostsComponent implements OnInit {
checkCost: Costs[];}

checkmaterial.component.ts

import { Component, OnInit } from '@angular/core';
import { Material } from './material';
import { BimService } from './bim.service';

 @Component({
selector: 'checkmaterial',
templateUrl: './checkmaterial.html',
providers: [BimService]})

export class CheckmaterialComponent implements OnInit {
AmtofMaterial: Material[];}

I am successfully able to debug the application and navigate between the components by loading respective components & HTML pages but HTTP Error 404.0 - Not Found is displaying while I am refreshing the page or URL.

Implemented angular2 in Visualstudio 2017.

Also, from the blogs, I found some solution like add rewrite rules in web.config file. there is No fix to my issue even after adding rewrite rules.

Your inputs are most appreciable!! Thanks in advance.