title: Angular 2 - On refreshing routed page...Not able to find component if refreshed only on route I am going using navigate
body: <p>Real newbie with angular 2 and new version of es2015
  I a</p>
  
  <p>App Structure</p>
  
  <pre><code>       app
         |---js
             |-- All js files
         |---ts
             |--- html 
           |--- contact_display.html
           |--- contact_block.html
           |--- edit_contact_form.html
           |--- navbar.html
           |--- new_contact_form.html
             |--- main.ts
             |--- contact_display.component.ts
             |--- contact_block.component.ts
             |--- edit_contact.component.ts
             |--- navbar.component.ts
             |--- new_contact.component.ts
             |--- contact.service.component.ts
             |--- contact.ts
             |--- contact.service.component.ts
             |--- mock_contact.component.ts
             |--- typings
           |-- underscore 
              |--- underscore.d.ts
         |---node_modules
         |---resources
         |---typings
         |--- index.html
         |--- package.json
         |--- tsconfig.json
         |--- typings.json
  </code></pre>
  
  <p>Files are as such
  <strong>Main.ts</strong></p>
  
  <pre><code>          import { bootstrap } from 'angular2/platform/browser';
            import { Component, provide } from 'angular2/core';
            import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, LocationStrategy, HashLocationStrategy} from 'angular2/router';
            import { NavbarComponent } from './navbar.component';
            import { ContactDisplayComponent } from './contact_display.component';
            import { NewContact } from './new_contact.component';
            import { EditContact } from './edit_contact.component';
  
  
  
            @Component({
              selector:'app-start',
              template:`
              &lt;navbar&gt;&lt;/navbar&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
              `,
              directives : [NavbarComponent,ROUTER_DIRECTIVES]
            })
  
            @RouteConfig([
              {path:'/',name:'Home',component:ContactDisplayComponent},
              {path:'/New_Contact',name:'New_Contact',component:NewContact},
              {path:'/Edit_Contact/:id',name:'Edit_Contact',component:EditContact}
            ])
  
            export class Main{
            }
  
  
            bootstrap(Main,
              [
                ROUTER_PROVIDERS
              ]
            );
  </code></pre>
  
  <p>I use navigate to route to go to the Edit Contact Page</p>
  
  <pre><code>        import { Component, OnInit} from 'angular2/core';
          import { ContactBlockComponent } from './contact_block.component';
          import { ContactService } from './contact.service';
          import { Contact } from './contact';
          import { ROUTER_DIRECTIVES, Router } from 'angular2/router';
  
  
          @Component({
          selector  :'contact-display',
          templateUrl:'app/ts/html/contact_display.html',
          styleUrls : ['../resources/contact_detail.css'],
          directives:[ ContactBlockComponent, ContactBlockComponent, ROUTER_DIRECTIVES ],
          providers:[ContactService]
          })
  
          export class ContactDisplayComponent
          {
          public contacts:Contact[];
          isSelected:boolean;
          selectedContact;
  
          constructor(private _contactService:ContactService, private _router:Router){
              this.isSelected = true;
          }
  
          onContactSelection(contact_picked){
              console.log(contact_picked.contact_phone);
              this.selectedContact = contact_picked;
              return false;
          }
  
          getContacts(){
              this._contactService.getContacts().then((contacts:Contact[]) =&gt; this.contacts = contacts);
          }
  
          /********* Navigate to Edit Contact ****************
  
          onEditContact(contact_picked){
              let userId = contact_picked.id;
              this._router.navigate(['Edit_Contact',{id:userId}]);
          }
  
      }
  </code></pre>
  
  <p>Errors on console are like this</p>
  
  <blockquote>
    <p>GEThttp://localhost:3000/app/js/navbar.component 404 (Not Found) 
    GEThttp://localhost:3000/app/js/contact_display.component 404 (Not Found)
    Error: XHR error (404 Not Found) link <a href="http://localhost:3000/app/js/navbar.component" rel="nofollow">http://localhost:3000/app/js/navbar.component</a>(…) 
    GEThttp://localhost:3000/app/js/new_contact.component 404 (Not Found)
    GEThttp://localhost:3000/app/js/edit_contact.component 404 (Not Found) </p>
  </blockquote>
  
  <p>All these file are those which I import in main.ts and in the same order</p>
  
  <pre><code>import { NavbarComponent } from './navbar.component';
  import { ContactDisplayComponent } from './contact_display.component'; 
  import { NewContact } from './new_contact.component'; 
  import { EditContact } from './edit_contact.component'; 
  </code></pre>
  
  <p>Index file containing system config which is </p>
  
  <pre><code>        &lt;script&gt;
              System.config({
              packages: {
                  app: {
                  format: 'register',
                  defaultExtension: 'js'
                  }
              },
              paths: {
                  underscore: '/node_modules/underscore/underscore.js'
              }
              });
              System.import('/app/js/main.js')
                  .then(null, console.error.bind(console));
          &lt;/script&gt;
  </code></pre>