无法获取 - 编辑 html 文件时出现 404 错误，浏览器会重新加载

Question

我在 gulpfile.js 中使用浏览器同步服务我的应用程序。

当我编辑我的 html 文件时，当浏览器重新加载时，它显示

Cannot GET /find

或者 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，但是它在旧版本的angular 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 },
   ],
})

无法获取 - 编辑 html 文件时出现 404 错误，浏览器会重新加载

cannot get - 404 error when I edit my html files, and the browser gets reloaded

gulp

browser-sync