1)app.component.html

<a [routerLink]="['home']">Home</a>
<a [routerLink]="['product']">Product</a>
<a [routerLink]="['contact']">Contact us</a>
<br/>
<router-outlet></router-outlet>

2)app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

3)app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent} from './home.component'
import { ContactComponent} from './contact.component'
import { ProductComponent} from './product.component'
import { ErrorComponent} from './error.component'
import { ProductDetailComponent} from './product-detail.component'
import { ProductService } from './product.service';
import { appRoutes } from './app.routes';

@NgModule({
  declarations: [
    AppComponent,HomeComponent,ContactComponent,ProductComponent,ErrorComponent,ProductDetailComponent
  ],
  imports: [
    BrowserModule,FormsModule,HttpModule,RouterModule.forRoot(appRoutes)
  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

4)app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent} from './home.component'
import { ContactComponent} from './contact.component'
import { ProductComponent} from './product.component'
import { ErrorComponent} from './error.component'
import { ProductDetailComponent} from './product-detail.component'
export const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'product', component: ProductComponent, 
    children: [
      { path: 'detail/:id', component: ProductDetailComponent }
    ]
   },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: ErrorComponent }
];

5)contact.component.ts

import {Component} from '@angular/core';
@Component({
     template: `<h1>Contact Us</h1>
                <p>RK </p>
                `
})
export class ContactComponent {
}

6)error.component.ts

import {Component} from '@angular/core';
@Component({
    template: `<h1>Page not found</h1>
               <p>This is a Error Page</p>
              `
})
export class ErrorComponent {
}

7)home.component.ts

import {Component} from '@angular/core';
@Component({
    template: `<h1>Welcome!</h1>
              <p>This is Home Component </p>
             `
})
export class HomeComponent {
}

8)product-detail.component.html

Product Details Page
<br/>
product : {{product.name}}
price : {{ product.price}}
<p>
    <a (click)="onBack()">Back </a>
</p>

9)product-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { ProductService } from './product.service';
import { Product } from './product';
@Component({
  templateUrl: './product-detail.component.html',
})
export class ProductDetailComponent{
   product:Product;
   id;
   constructor(private _Activatedroute:ActivatedRoute,
               private _router:Router,
               private _productService:ProductService){
   }
   onBack(): void {
      this._router.navigate(['product']);
   }
  sub;
   ngOnInit() {
      this.sub=this._Activatedroute.params.subscribe(params => { 
          this.id = params['id']; 
          let products=this._productService.getProducts();
          this.product=products.find(p => p.productID==this.id); 
      });
   }
   ngOnDestroy() {
     this.sub.unsubscribe();
   }
}

10)product.component.html

Product List
<div class='table-responsive'>
    <table class='table'>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let product of products;">
                <td>{{product.productID}}</td>
                <td><a [routerLink]="['detail',product.productID]">{{product.name}} </a> </td>
                <td>{{product.price}}</td>
            </tr>
        </tbody>
    </table>
</div>
<router-outlet></router-outlet>

11)product.component.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';
import { Product } from './product';
@Component({
  templateUrl: './product.component.html',
})
export class ProductComponent{
   products:Product[];
   constructor(private productService:ProductService){
   }
   ngOnInit() {
     this.products=this.productService.getProducts();
   }
}

12)product.service.ts

import { Observable } from 'rxjs/Observable';
import {Product} from './Product';
export class ProductService{
    public getProducts() {
        let products:Product[];
        products=[
            new Product(1,'Memory Card',500),
            new Product(2,'Pen Drive',750),
            new Product(3,'Power Bank',100)
        ]
        return products;               
    }
    public getProduct(id) {
        let products:Product[]=this.getProducts();
        return products.find(p => p.productID==id);
    }
}

13)product.ts

export class Product {
        constructor(productID:number,    name: string ,   price:number) {
        this.productID=productID;
        this.name=name;
        this.price=price;
    }
    productID:number ;
    name: string ;
    price:number;

}