Cannot GET /page angular 2 routing error
<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>