title: Cannot GET /page angular 2 routing error
body: <p>I've set up routing in angular that works perfectly correct within application, however if I navigate to my about page for example so <code>http://localhost:9000/about</code> and refresh the page I get error saying <code>"Cannot GET /about"</code>,  same happens if I open a new tab and paste url there and visit the page.</p>
  
  <p><strong>My boot.ts file containint routing logic</strong></p>
  
  <pre><code>// -- Typescript typings -------------------------------------------------------
  /// &lt;reference path="../typings/jquery.d.ts" /&gt;
  /// &lt;reference path="../typings/jqueryui.d.ts" /&gt;
  
  
  
  //Imports ----------------------------------------------------------------------
  import {Component, enableProdMode} from 'angular2/core';
  import {bootstrap} from 'angular2/platform/browser';
  import {
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    Router,
    RouteConfig,
  } from 'angular2/router';
  
  
  
  // -- Application Imports ------------------------------------------------------
  import {NavbarComponent} from './components/navbar.component';
  import {HomePage} from './pages/home.page';
  
  
  
  // -- Enable production module -------------------------------------------------
  enableProdMode();
  
  
  
  // -- Component ----------------------------------------------------------------
  @Component({
      selector: 'main-app',
      directives: [ ROUTER_DIRECTIVES, NavbarComponent ],
      template: `
        &lt;app-navbar&gt;&lt;/app-navbar&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      `
  })
  
  
  
  // -- Routing ------------------------------------------------------------------
  @RouteConfig([
    { path: '/', name: 'root', redirectTo: ['/Home'] },
    { path: '/home', name: 'Home', component: HomePage }
  ])
  
  
  
  // -- Class --------------------------------------------------------------------
  export class MainApp {
    constructor(public router: Router) {}
  }
  
  
  
  // -- Bootstrap for application ------------------------------------------------
  bootstrap(MainApp, [
    ROUTER_PROVIDERS
  ]);
  </code></pre>
  
  <p><strong>the index.html file</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;base href="/"&gt;
  
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Angular2 starter&lt;/title&gt;
  
      &lt;!-- Application css --&gt;
      &lt;link href="dist/libraries/bundle.css" rel="stylesheet"&gt;&lt;/link&gt;
      &lt;link href="dist/styles/main.css" rel="stylesheet"&gt;&lt;/link&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;main-app&gt;Loading...&lt;/main-app&gt;
  
      &lt;!-- Application js --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="dist/libraries/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;!-- ES6-related imports --&gt;
  &lt;script src="/node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
  &lt;script src="/node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
  &lt;script src="/node_modules/systemjs/dist/system.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      //configure system loader
      System.config({defaultJSExtensions: true});
  &lt;/script&gt;
  &lt;script src="/node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
  &lt;script src="/node_modules/angular2/bundles/angular2.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      //bootstrap the Angular2 application
      System.import('dist/app/boot').catch(console.log.bind(console));
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>and project structure</strong></p>
  
  <pre><code>dist/
    app/
      components/
        navbar.component.js
      pages/
        home.page.js
      boot.js
    assets/
    typings/
  src/
    ... original files that are compiled into dist here
  index.html
  </code></pre>