index.html changes get reloaded one save behind

[slawojstanislawski]

When I introduce changes into .html files placed somewhere under /app folder, right after the save operation the changes are reflected in the browser, live reload works fine. But when I introduce changes to the src/index.html file, the change is reflected in the browser only after saving another (second) change. So live reload is one step behind on changes in the src/index.html file.
I thought changing line 36 in gulp/watch.js from:

    gulp.watch(path.join(conf.paths.src, '/app/**/*.html'), function(event) {

to:

    gulp.watch(path.join(conf.paths.src, '/**/*.html'), function(event) {

would help, but it didn't change the behavior.

[skeenan]

+1 seeing this behaviour too

[simonerni]

+1

I think it's because the Inject Task doesn't trigger a browser sync reload, because the styles task does indeed trigger one.

[Swiip]

Thanks for reporting, I reproduce it. I have to dig a bit...

[jesucarr]

I just tried adding .pipe(browserSync.reload({ stream: true })) as the styles task does, but the issue is still there.

I also tried adding gulp.watch(path.join(conf.paths.tmp, '/serve/*.html'), browserSync.reload);, so the browser reloads after the inject task, but no luck.I just tried adding .pipe(browserSync.reload({ stream: true })) as the styles task does, but the issue is still there.

I also tried adding gulp.watch(path.join(conf.paths.tmp, '/serve/*.html'), browserSync.reload);, so the browser reloads after the inject task, but no luck.

[zckrs]

Reproduce.

But why edit index.html @slawojstanislawski ?

[skeenan]

@zckrs this is a ridiculous question. lot's of reasons for doing this.

[slawojstanislawski]

Well, why edit, perhaps it is valid to say that one should only edit the templates/files angular puts together into the index.html at runtime, but one can still edit index.html and it causes reload, yet in a way that other files don't, I suppose it won't lead to anything serious, just a bit of confusion and introduction of one more unnecessary change (like a single blank space) to reload to see the change, it's just a user experience matter.
As to why one may edit index.html, there can be many reasons, although I can't think of any very serious example, with exception maybe for a viewport tag changes or introduction of some meta tags, like facebook open graph meta tags - although I didn't test this particular use case, so I'm not sure about the generator's behavior on this one - just off the top of my head.

[skeenan]

Other cases would be to use webfonts via a CDN, or adding css classes to the toplevel content div.

[sqal]

@jesucarr, @skeenan: I think the issue has something to do with that part:

gulp.watch(path.join(conf.paths.src, '/app/**/*.html'), function(event) {
    browserSync.reload(event.path);
});

I replaced it with:

gulp.watch([
    path.join(conf.paths.tmp, '/serve/*.html'),
    path.join(src, 'app/**/*.html')
]).on('change', reload);

and now works as expected :) Good luck.
`

[jesucarr]

@sqal I just tried your suggestion but it doesn't seem to work for me :(

[sqal]

@jesucarr ops ofc I made a mistake in my previous comment, it should be conf.paths.src instead of just src because I had this variable declared before. And the same thing goes for reload -> browserSync.reload. Did you fix these by yourself and it's still not working?

[jesucarr]

@sqal yes I did those changes and I also tried with a / in front of app, but it doesn't fix it. Remember the issue is that it's loading one behind, so if you save twice, it would show as expected. Try doing gulp serve, make a change in index, and save just once. Do you have that issue?

[sqal]

@jesucarr I understand the issue and I also had this problem, but my changes solved it for me (changes made to index.html are visible after first save). It's weird it's not working for you. But to make sure i just did clean install of generator, did the changes, ans it's still working :).

[dtolstyi]

The issue looks quite easy. The problem is just in the order of execution of tasks: as soon as you save changes to index.html automatic page reload happens, but in parallel there's a task which performs inject of static resources.
And it turns out that refresh is performed before the new index.html file is actually built. That's why you are seeing previous version of your file.
This can be easily verified inside .tmp/serve/index.html file.

P.S. Though the issue is quite easy - it's quite hard to resolve it using Gulp 3.x
The solution requires us to wait tasks inject, styles and/or scripts to finish and to call reload after this. One of the solutions is to use run-sequence module but it means we need one more module in the setup.
At the same time it should be quite easy to achieve in Gulp 4. So, depending on the time when Gulp Angular generator is going to move to Gulp 4 it might not worth performing so many changes just because of index.html.

[Swiip]

Perfect, thanks for the analysis and the PR!

[dtolstyi]

@Swiip, Thank you for your generator, Matthieu. It's a pleasure to help a bit into it's development)