How to integrate routing in angular 2

Before continue this first refer following article

Integrate Bootstrap in angular

Step 1:
please copy the following script and paste in app.component.html page

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>                      

      </button>

      <a class="navbar-brand" href="#">Logo</a>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav">

        <li class="active"><a routerLink="/">Home</a></li>

        <li><a routerLink="/about">About</a></li>

      </ul>

    </div>

  </div>

</nav>

<router-outlet></router-outlet>

<footer class="container-fluid text-center">

  <p>Footer Text</p>

</footer>

Step 2:

After that I created routing component for configuring the paths.

please create app-routing.module.ts file and place 'src/app/' folder

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

import { RouterModule, Routes} from '@angular/router';

import {homeComponent} from './home/home.component';

import {aboutComponent} from './about/about.component';

const appRoutes: Routes = [

 {path:'',redirectTo:'/home',pathMatch:'full'},

 {path:'home',component: homeComponent},

 {path:'about',component: aboutComponent} 

];

@NgModule({

 imports: [
  RouterModule.forRoot(

   appRoutes,

   { enableTracing: true}


  )

 ],

 exports:[

  RouterModule

 ]

})

export class AppRoutingModule {}

Step 3:

please create following home component files and place in following 'src/app/home/'.

home.component.ts

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

@Component({
 selector:'app-home',
 templateUrl:'./home.component.html'
})
export class homeComponent{}

home.component.html

<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left"> 
      <h1>Home Page</h1>
      <p>Home Page Text..</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
     
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

Step 4:

please create following about component files and place in following 'src/app/about/'.

about.component.ts

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

@Component({
 selector:'app-about',
 templateUrl:'./about.component.html'
})

export class aboutComponent {}

about.component.html

<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left"> 
      <h1>About Us</h1>
      <p>About Page Text..</p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

Step 5:

please copy the following code and paste in 'src/app/app.module.ts'

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import {homeComponent} from './home/home.component';
import {aboutComponent} from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    homeComponent,
    aboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule

  ],
   entryComponents: [
        homeComponent,
        aboutComponent
    ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

please verify routing module in your browser using http://localhost:4200