Ionic-app-scripts: ionic serve - browser not refreshed on save

[sveinl]

Short description of the problem:

ionic serve -b doesnt refresh the browser after saving changes in editor. Have to save twice to make the changes updated in browser

What behavior are you expecting?

When saving the browser should refresh

Steps to reproduce:

1. run ionic serve -b then open a browser for localhost:8100
2. Edit some file in the project and save

Which @ionic/app-scripts version are you using?
0.0.40 and 0.0.41

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.39 <-- Reverted to 0.0.39 to make it work again
OS: Windows 10
Node Version: v6.7.0

[cleever]

Same here. I had to switch back to 0.39 because of this.

[dallastjames]

+1 same issue using 0.0.41. Seems to be hit and miss. Some instances I have to quit out of serve mode and restart to get it to reload the files correctly.

[Iyashu5040]

Also experiencing this. Saving twice triggers a proper build/refresh.

Some more info:
The watch seems to trigger and the console outputs that a template update/transpile update has started. They finish successfully but the page in the browser does not refresh as it should. Even if you refresh the browser (F5) the source files have not been updated, so the page is still being served the files from the previous template/transpile update.

[cmaart]

Can confirm,

[dylanvdmerwe]

Same issue experienced here. Never ending issues with this new build system!

[danbucholtz]

Are you all developing on Windows? I have used app-scripts hundreds (thousands even) of times and I have never seen this - but I develop on a Mac.

Thanks,
Dan

[dylanvdmerwe]

I'm on a Mac, but my team uses Windows. Can everyone confirm if this is still an issue in the latest version?

[danbucholtz]

I cannot recreate this on Windows 7 with Node 6.x - whatever the LTS version is. Just built out an app in the past 20 minutes and it worked flawlessly. I am thinking maybe it's a Windows 10 issue. I have never tested on Windows 10.

Thanks,
Dan

[sveinl]

I just tried 0.0.43 and same issue.
Working fine in 0.0.39

I am on windows 10

I ran the serve with debug and attached the output if that can help you debug this issue.

ionic_serve_log.txt

[plmetz]

I see the same with Windows 10. Had to revert back to 0.0.39 which works fine. On @latest intermittently when saving multiple files the live reload triggers but changes in one file wouldn't reflect in the build.

[danbucholtz]

When you see this occur, can you do me a favor and just refresh the page and see it the correct code is there? I am thinking this is a race condition on Windows where the "file write event" fires before the file is truly written. The bug would be in a library that we use but I have some ideas to work around it.

Thanks,
Dan

[sveinl]

Just tested again with 0.0.43 - saved and the browser didnt reload.
Tried a manual reload of the browser but the app didnt update until i saved once more.

[danbucholtz]

When this happens, are you saving more than one file at a time? Like a Save all functionality or something?

Thanks,
Dan

[sveinl]

Only one file.
I also tried editing 2 files and then save-all. With the save-all test sometimes the browser updates - sometimes not. But usually wrong result - meaning the "old" file. Doesnt help manually refresh the browser.

[andborges]

Same here guys, on Windows 10, saving one file or many files.
How can I revert to previous version?

Thanks.

[guillefd]

@andborges you can rollback the changes on your package.json and then run npm install
make sure this line says: "@ionic/app-scripts": "0.0.39",
If fails, you can try deleting the folders: ./tmp and /www and run again npm install (this folders are auto-generated)

[cmaart]

Still no news concerning this issue?

For me the behavior @0.0.45 and .46 is like this:

• Changes to HTML files make the browser go completely white and nothing happens. After a manual reload it seems to get the updated version so far
• Changes to Typescript files seem to work

[Mokto]

Working on Windows 7.

[danbucholtz]

@cmaart,

Can you give me more info or a path to recreate the issue?

We released what we believed to be fixes for this issue. Are you all still experiencing it with 0.0.46?

Thanks,
Dan

[danbucholtz]

This issue should be resolved. Please let me know if it's not and it's a major drain on productivity.

Thanks,
Dan

[joepadz]

ensure that all items are saved. Like for Visual Studio Code click the Save All button.

[ultrawebsites]

Not sure if it's the same issue or a related issue. I have app-scripts v2.1.3 on Windows 10, and when I save a change to a HTML view file (*.html), the first time I save a transpile is NOT done; I have to save a second time for the transpile to be done and for the updates in to the HTML file to be visible in my browser.

Here are the echos from my command prompt for the first and second save of a .html file:
[11:05:39] build started ...
[11:05:39] template update started ...
[11:05:39] template update finished in 12 ms
[11:05:39] deeplinks update started ...
[11:05:39] deeplinks update finished in 176 ms
[11:05:39] build finished in 189 ms

[11:05:48] build started ...
[11:05:48] transpile started ...
[11:05:51] transpile finished in 3.32 s
[11:05:51] deeplinks update started ...
[11:05:51] deeplinks update finished in 94 ms
[11:05:51] webpack update started ...
[11:05:52] webpack update finished in 710 ms
[11:05:52] build finished in 4.12 s

It seems to be the transpile that makes the difference. Let me know if I should open a new bug. This happens for single file saves.

[tmk1991]

I have the exact same issue as @ultrawebsites.

"devDependencies": { "@ionic/app-scripts": "2.0.2", "@ionic/cli-plugin-cordova": "1.6.2", "@ionic/cli-plugin-ionic-angular": "1.4.1", "ionic": "3.6.0", "typescript": "2.3.4" },

[HenryKenya]

having the same issue.
Has this been fixed yet?

[jjjhanreyyy]

Issue still exist. Experienced it with windows 8 and windows 10.

[timsar2]

today i was trying to config visual studio code with chrome for debug tools
after that i fall in this issue.
(Windows 7 & 10, ionic cli 4.0.3 lazyload)
page must save twice to show change on browser.
i also reset all change on vs code and chrome but issue still exist.
i had a warning too during start new ionic project

> npm i
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.