angularjs2 SPA - /頁如何改變一口任務，以防止無法得到錯誤

Question

問題：我得到「無法得到/英雄」或試圖達成http://localhost:9000/dashboard或http://localhost:9000/heroes

時「無法GET /儀表板」錯誤我現在有一個大口的任務設置的網頁：

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); 
}); 

問：我應該在我的任務，一飲而盡，以防止index.html文件更改被繞過？
我曾嘗試添加connect-history-api-fallback，但我不知道如何正確設置。

我嘗試以下，但那就不是讓我改變的子頁面都：

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

這裏是我的angularjs2路由配置（如果它幫助）：

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'; 
} 

感謝提前！

這裏要求是整個吞掉文件（希望它可以幫助你）：

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

這裏的答案如何設置它在一飲而盡任務：

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