Browser sync for Angular SPA

Question

I'm using browser sync with an Angular SPA. Serving the site looks like this:

gulp.task('serve', function() {
  browserSync.init(null, {
    server: {
      baseDir: './',
      middleware: [historyApiFallback()]
    }
  });
});

This works fine. The use of historyApiFallback (npm module) means browser sync doesn't freak out when going to a new URL path when all it needs to do is continue serving the index.html.

The problem I have is with watching files. I've tried this:

gulp.task('watch', function() {
  watch('./src/scss/**/*.scss', function() {
    runSequence('build-css', browserSync.reload);
  });
});

The watch task does work because the build-css task triggers fine. Then the console logs Reloading Browsers... and just hangs. The browser never gets the CSS injection or reload. What am I doing wrong here?

Note that I'm using gulp-watch not the native gulp watch purposely.

Answer 1

I recommend you to use the lite-server. It is a simple customized wrapper around BrowserSync to make it easy to serve SPAs(you don't even have to configure the history api).

You can use it by simple adding an entry in the scripts object in your package.json and running the following command: npm run dev.

"scripts": { "dev": "lite-server" },

The module will automatically watch for changes of your files and keep then sync. So it will work with your gulp, because it will update your browser after the build-css task is executed(because the output files will change).

I am currently using it with angular 1, angular 2 and vue.js and worked fine with all.