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

Question

I serve my app with browser-sync in a gulpfile.js.

When I edit my html files, when the browser gets reloaded, it says

Cannot GET /find

or whatever the url is to the page i am viewing.

If I serve my app with npm run lite it doesn't have this issue. Why am I getting this issue?

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"]);

note I serve the app by running gulp which runs the default task.

score 0 · Accepted Answer · edited May 23 '17 at 12:08

This answer worked, but it was used in the older version of angular 2 so I had to use it like this (add to the providers field of 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 },
   ],
})

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

1 Answers1

Linked