Bug: In certian cases html file changes not being picked up by brower-sync

[josephskeller]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see use [gitter](https://gitter.im/mgechev/angular2-seed) or [stackoverflow](https://stackoverflow.com/questions/tagged/angular2)

Current behavior

After kicking off a local development build using npm start there is an issue when making changes to more than one source file (html in particular). The build process detects code changes, but fails to copy over all the changes to the Config.APP_DEST folder (in this case dist/dev) .

The issue is a timing issue. Sometimes the 'build.assets.dev' gulp task is kicked off before all files have been saved, in my case, by IntelliJ. As a result, not all "saved" files (or will be saved once the save is complete) are copied over. This can be proved by setting a breakpoint in build.assets.dev.ts as shown below:

export =
  class BuildAssetsTask extends AssetsTask {
    run() {
      let paths: string[] = [
        join(Config.APP_SRC, '**'),
        '!' + join(Config.APP_SRC, '**', '*.ts'),
        '!' + join(Config.APP_SRC, '**', '*.scss'),
        '!' + join(Config.APP_SRC, '**', '*.sass')
            ].concat(Config.TEMP_FILES.map((p) => { return '!' + p; }));

      // Setting the breakpoint here which will give the IDE time to save all the files. Once all
      // the files have been saved they will be copied over properly (in this case to 
      // 'dist/dev'.) But if you take off the breakpoint, it's possible that not all the files 
      // have been saved before this task is invoked.
      debugger;
      return gulp.src(paths)
        .pipe(gulp.dest(Config.APP_DEST));
    }
  };

Expected behavior
Once one or more source files (html) are changed AND all of them have been saved by the IDE/editor/etc. they should be consumable by the browser.

Minimal reproduction of the problem with instructions

see above

Please tell us about your environment: Windows 10, IntelliJ, brower-sync.

• Angular Seed Version: 3f33d41

• Node: node --version = 3.10.8

[josephskeller]

A "temporary" solution to help deal with what appears to be a "race condition" is change watch.ts as follows:

import * as gulpLoadPlugins from 'gulp-load-plugins';
import { join } from 'path';
import * as runSequence from 'run-sequence';
import Config from '../../config';
import { changeFileManager, changed } from './code_change_tools';

const plugins = <any>gulpLoadPlugins();

/**
 * Watches the task with the given taskname.
 * @param {string} taskname - The name of the task.
 */
export function watch(taskname: string) {
    return function () {
        let paths: string[] = [
            join(Config.APP_SRC, '**')
        ].concat(Config.TEMP_FILES.map((p) => {
            return '!' + p;
        }));

        plugins.watch(paths, (e: any) => {
            changeFileManager.addFile(e.path);

            // TODO: Find a better way to ensure that all files are first saved to disk before 
            // kicking off 'taskname'.
            setTimeout(() => {
                runSequence(taskname, () => {
                    if (!!changeFileManager.lastChangedFiles && changeFileManager.lastChangedFiles.length > 0) {
                        changed(changeFileManager.lastChangedFiles);
                        changeFileManager.clear();
                    }
                });
            }, 100);
        });
    };
}

[mgechev]

Thanks for reporting the issue. This doesn't seem like a problem in angular-seed, although I definitely see the inconvenience...I don't see any other fix of this problem which will prevent us from getting coupled with the autosave behavior of individual IDEs.

Has it happened to you IntelliJ to need more than a 100ms to save all the changed files? I guess this depends on the number of files and disk speed but in case in >95% of the cases an IDE requires up-to 100ms to store everything on the disk, I think we can introduce the suggested by you workaround. 100ms are not something which will be annoying delay to developers, I believe.

[josephskeller]

Thank you Minko for replying so quickly. The workaround does resolve the
issue. I didn't have this issue back in September but it arose when I
upgraded to the latest code back 2 weeks ago...

I think you are wise to be careful to not couple the project to an IDE. I
suspect this issue might occur in many editors that save multiple files at
once.

Thank you again for your good work on this project.

Joseph
On Tue, Nov 8, 2016 at 3:16 PM Minko Gechev notifications@github.com
wrote:

Thanks for reporting the issue. This doesn't seem like a problem in
angular-seed, although I definitely see the inconvenience...I don't see any
other fix of this problem which will prevent us from getting coupled with
the autosave behavior of individual IDEs.

Has it happened to you IntelliJ to need more than a 100ms to save all the
changed files? I guess this depends on the number of files and disk speed
but in case in >95% of the cases an IDE requires up-to 100ms to store
everything on the disk, I think we can introduce the suggested by you
workaround. 100ms are not something which will be annoying delay to
developers, I believe.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#1615 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABz7kDog1Io1RX-KPsvBk3OgUW73CXSTks5q8PTIgaJpZM4Ksnts
.