不能得到 - 404錯誤，當我修改我的HTML文件，瀏覽器被重新加載

Question

我爲我提供瀏覽器同步應用在gulpfile.js。

當我編輯HTML文件，當瀏覽器被重新加載，它說

不能得到/找到

或任何網址是我正在查看的頁面。

如果我爲我的應用程序與npm run lite它沒有這個問題。爲什麼我會遇到這個問題？

gulpfile.js：

var gulp = require("gulp"); 
var sass = require("gulp-sass"); 
var sourceMaps = require("gulp-sourcemaps"); 
var del = require("del"); 
var typescript = require("gulp-typescript"); 
var tslint = require("gulp-tslint"); 
var browserSync = require("browser-sync"); 

gulp.task("serveApp", ["build"], function() { 
    browserSync.init({ 
     server: { 
     baseDir: "./", 
     }, 
    }); 
}); 

gulp.task("compileTypescript", ["clean"], function() { 
    return gulp.src("src/**/*.ts") 
     .pipe(sourceMaps.init()) 
     .pipe(typescript({ 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "lib": ["es2015", "dom"], 
     "module": "system", 
     "moduleResolution": "node", 
     "noImplicitAny": true, 
     "outDir": "dist/", 
     "removeComments": false, 
     "sourceMap": true, 
     "target": "es5", 
     "typeRoots": [ 
      "./node_modules/@types", 
     ], 
     })) 
     .pipe(sourceMaps.write("./")) 
     .pipe(gulp.dest("dist/")); 
}); 

gulp.task("compileSass",() => { 
    gulp.src("src/**/*.scss") 
     .pipe(sourceMaps.init()) 
     .pipe(sass().on("error", sass.logError)) 
     .pipe(sourceMaps.write("./")) 
     .pipe(gulp.dest("./src")); 
}); 

gulp.task("watchSass", function() { 
    gulp.watch("src/**/*.scss", ["compileSass", "reloadAfterSassChanged"]); 
}); 

gulp.task("watchTypescript", function() { 
    gulp.watch("src/**/*.ts", ["compileTypescript", "reloadAfterTypescriptChanged"]); 
}); 

gulp.task("watchHtml", function() { 
    gulp.watch("src/**/*.html", ["reloadAfterHtmlChanged"]); 
}); 

gulp.task("reloadAfterSassChanged", ["compileSass"], function(done) { 
    browserSync.reload(); 
    done(); 
}); 

gulp.task("reloadAfterHtmlChanged", function() { 
    browserSync.reload(); 
}); 

gulp.task("reloadAfterTypescriptChanged", ["compileTypescript"], function(done) { 
    browserSync.reload(); 
    done(); 
}); 

gulp.task("clean",() => { 
    return del("dist"); 
}); 

gulp.task("build", ["watchTypescript", "watchSass", "watchHtml"]); 

gulp.task("default", ["serveApp"]); 

注意到我所服務的運行gulp它運行默認任務應用程序。

Answer 1

This answer worked，但它是在舊版本的角2使用的，所以我不得不使用它像這樣（加的app.module.ts提供商場）：

app.module.ts

import { HashLocationStrategy, Location, LocationStrategy } from "@angular/common"; 

@NgModule({ 
    bootstrap: [AppComponent], 
    declarations: [ 
     AppComponent, 
    ], 
    imports: [ 
     BrowserModule, 
     RouterModule.forRoot(routerConfig), 
     LandingPageModule... 
    ], 
    providers: [ 
     FormBuilder, 
     Location, { provide: LocationStrategy, useClass: HashLocationStrategy }, 
    ], 
})