无法获得 - 编辑 html 文件时出现 404 错误，并且重新加载浏览器答案

【问题标题】：cannot get - 404 error when I edit my html files, and the browser gets reloaded无法获得 - 编辑 html 文件时出现 404 错误，并且重新加载浏览器
【发布时间】：2023-04-05 15:24:01
【问题描述】：

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

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

无法 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 来服务应用程序。

【问题讨论】：

标签： gulp browser-sync

【解决方案1】：

This answer worked，但它是在旧版本的 angular 2 中使用的，所以我不得不这样使用它（添加到 app.module.ts 的 providers 字段）：

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

【讨论】：