title: Angular2- When refresh the page, url remains same but appropriate view doesn't get loaded
body: <p>In Angular2, I am facing this issue. When you refresh the page. The URL remains same but it doesn't load appropriate view in <code>RouterOutlet</code>.</p>
  
  <p><strong><em>Everything works fine except refreshing page issue.</em></strong></p>
  
  <p><strong>app.ts</strong></p>
  
  <pre><code>import {Component,bind} from 'angular2/core';
  
  import {bootstrap} from 'angular2/platform/browser';
  import {FORM_DIRECTIVES} from 'angular2/form';
  import{HomeCmp} from 'Angular/src/Home/home.ts';
  import {ContactUsCmp} from 'Angular/src/ContactUs/contactus.ts';
  
  import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
  @Component({
  selector: 'micropuppy-app',
  templateUrl: "ANGULAR/Templates/home.html",
  directives:[HomeCmp,ROUTER_DIRECTIVES,ContactUsCmp],
  template: ` &lt;nav&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                      **&lt;li&gt;&lt;a [routerLink]="['Home']"&gt;One&lt;/a&gt;&lt;hr/&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a [routerLink]="['ContactUs']"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;**
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Technologies &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Angular&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;.NET&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;`
   })
  
  @RouteConfig([
    {path:'/Home', name: 'Home', component: HomeCmp}
    {path:'/ContactUs', name: 'ContactUs', component: ContactUsCmp}
  ])
  
  export class MicropuppyApp {
      constructor(){
          console.log("Micropuppy app started");
      }
  }
   bootstrap(MicropuppyApp, [ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)]);
  </code></pre>