は、HTMLファイルを編集すると404エラーが発生し、ブラウザがリロードされます。

Question

gulpfile.jsのbrowser-syncで私のアプリケーションを提供します。

ブラウザをリロードしますときに私は、私のhtmlファイルを編集するとき、それは

を言うには、GET/

または任意のURLは私が見ていますページにある見つけることができません。

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 }, 
    ], 
})