Question

我在gulpfile.js中使用browser-sync提供我的应用程序。

当我编辑我的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 },
   ],
})

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

1 个答案: