angularjs2 SPA - how to change gulp task to preven

Question

the problem: i get "Cannot GET /heroes" or "Cannot GET /dashboard" errors when trying to reach http://localhost:9000/dashboard or http://localhost:9000/heroes

i currently have a gulp task to setup the webpage:

var http = require('http');<br/>
var connect = require('connect');<br/>
var serveStatic = require('serve-static');<br/>
var open = require('open');<br/>
var port = 9000, app;<br/>

gulp.watch(PATHS.src, ['ts2js']);

app = connect().use(serveStatic(__dirname));

http.createServer(app).listen(port, function () {
    open('http://localhost:' + port);
});

Question: what should i change in my gulp task to prevent the index.html file being bypassed?
I have tried adding in connect-history-api-fallback but I don't know how to setup properly.

i tried the following but then it wouldn't let me change the subpage at all:

var history = require('connect-history-api-fallback');
app = connect().use(serveStatic(__dirname));
app.use(history);

Here is my angularjs2 routing config (if it helps):

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';

import {DashboardComponent} from './dashboard.component';
import {HeroesComponent} from './heroes.component';

@Component({
    selector: 'start-app',
    template: `
    <h1>{{title}}</h1>
    <nav>
      <a [routerLink]="['Dashboard']">Dashboard</a>
      <a [routerLink]="['Heroes']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  `,
    styleUrls: ['./src/app/app.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [/*HeroService,*/ ROUTER_PROVIDERS]
})
@RouteConfig([
    { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
    { path: '/heroes', name: 'Heroes', component: HeroesComponent }
])
export class App//Component
 {
    public title = 'Tour of Heroes';
}

thanks in advance!

as requested here is the whole gulp file (hope it helps you):

var gulp = require('gulp');

var PATHS = {
src: 'src/**/*.ts'
};

gulp.task('clean', function (done) {
var del = require('del');
del(['dist'], done);
});

// copy dependencies
gulp.task('copy:libs', ['clean'], function() {
gulp.src([
        'src/app/*.html', 'src/app/*.css'
    ])
    .pipe(gulp.dest('dist/app'));

gulp.src([
        'src/home/*.html', 'src/home/*.css'
    ])
    .pipe(gulp.dest('dist/home'));

gulp.src([
        'src/login/*.html', 'src/login/*.css'
    ])
    .pipe(gulp.dest('dist/login'));

gulp.src([
        'src/signup/*.html', 'src/signup/*.css'
    ])
    .pipe(gulp.dest('dist/signup'));
});

gulp.task('ts2js',['copy:libs'], //['copy:libs'],
function () {
    var typescript = require('gulp-typescript');
    var tscConfig = require('./tsconfig.json');

    var tsResult = gulp
        .src(PATHS.src)
        .pipe(typescript(tscConfig.compilerOptions));

    return tsResult.js.pipe(gulp.dest('dist'));
});

gulp.task('play', ['ts2js'], function () {
var http = require('http');
var connect = require('connect');
var serveStatic = require('serve-static');
var open = require('open');

var port = 9000, app;

gulp.watch(PATHS.src, ['ts2js']);

app = connect().use(serveStatic(__dirname));
http.createServer(app).listen(port, function () {
    open('http://localhost:' + port);
});

});
gulp.task('default', ['play']);

Answer 1

here is the answer how to set it up in that gulp task:

var historyApiFallback = require('connect-history-api-fallback');
var bs = require('browser-sync').create();
bs.init({
    server: {baseDir: "./", middleware: [ historyApiFallback() ]}
});