Code changes are not reflected after a live reload - ionic serve

[comfortme]

Short description of the problem:

with ionic serve and chrome as browser, after saving the changes, live reload is triggered, code rebuilds, browser reloads but the changes are not reflected. i see the previous build. Have to save twice to make the changes updated in browser.
this problem does not happen every time though.
i dont know what causes this but it happens 1/3 of my saves.

What behavior are you expecting?

When saving the changes should be reflected.

Steps to reproduce:

1. Run ionic serve then open chrome for localhost:8100
2. Edit some file in the project and save
3. If you see the changes be patient and go back to step 2

**Which @ionic/app-scripts version are you using?**
app-scripts version: 0.0.42
Cordova CLI: 6.1.1
Ionic CLI Version: 2.1.7
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.7.0
Xcode version: Not installed

[danbucholtz]

@comfortme,

When you see this happen, can you manually reload the page and verify if the expected code is there or not. Maybe this is a race condition with watches since sometimes watches fire before the file is fully written. Hmmmm.

I cannot recreate this on Windows 7.

Thanks,
Dan

[comfortme]

this happens in my home computer too which is windows 8.1
i am using vscode as an editor maybe related to that? i'll check and inform you. thanks.

[comfortme]

@danbucholtz ,
i can verify that expected code is there.
i recreated the issue and reloaded page like you asked and the changes are reflected as expected.
tried it with notepad++ too still the same issue.

[danbucholtz]

Thanks for validating. It sounds like a race condition, we'll investigate.

Thanks,
Dan

[comfortme]

thank you,

weird notes from my observations,

---

1.change js file
2.live reload
3.view is not changed
4.reload manually
5.view is changed.

---

1.change html
2.live reload
3.view is changed

---

1.change js file
2.live reload
3.view is not changed
4.do not reload manually and change html now
5.live reload
6.view is changed but just html part.
7.reload manually
8.view is changed but just html part. js change is not reflected and code is not there anymore manually reloading does not work. you have to make another change in js.

[joshgarwood]

FWIW I'm seeing the same behavior as @comfortme

[danbucholtz]

Okay, there is definitely something wrong, then. We'll figure it out and fix it. Windows 10, right? I have never seen that behavior on Mac OS or Windows 7/8.

Thanks,
Dan

[webprofusion-chrisc]

Confirm that I see this on Windows 10, not sure if it happens every time but changing the JS sometimes needs another save for the change to be reflected, build output looks like this:

[13:35:19] build started ...
[13:35:19] transpile started ...
[13:35:23] transpile finished in 3.47 s
[13:35:23] webpack update started ...
[13:35:27] webpack update finished in 4.05 s
[13:35:27] build finished in 7.53 s

Bonus bug, the C in Cordova is missing when running 'ionic info'):

Your system information :

ordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.7
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.43
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

[joshgarwood]

Yes, I'm on Windows 10 as well.

[danbucholtz]

@joshgarwood, @webprofusion-chrisc,

Any idea what's causing this? I cannot recreate on Windows 10 or windows 7. Both are VMs - not sure if that would have any impact.

Any idea how I can recreate this? Is there anything unique about your set-up? Do you have SSDs? I am noticing the build times seem a little slow - wondering if the file watch isn't triggering at the correct time or something. I'm not sure.

Please let me know if you have any ideas.

Thanks,
Dan

[joshgarwood]

Hey @danbucholtz .. Unfortunately I have no idea, ha. I can say that it happens most typically if I try to save multiple times in succession. So if I have 3 unsaved changes across 3 different files, and do Save All it seems to get confused. Also seems to happen randomly if I have an error in one of my templates (like calling a function that doesnt exist in my component).

It's still random overall, but your best chance at duping it (from my experience) is to make multiple saves in close succession.

Thanks again for looking into this; it'll definitely save me some pain and frustration once it's fixed, ha.

[arielfaur]

I am experiencing that same issue on Windows 10 with an SSD. I noticed that build times tend to get worse over time after a few builds. I am use Visual Studio Code.

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.43
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

[joshgarwood]

I have an SSD as well.

[danbucholtz]

@arielfaur,

Any thoughts on what it might be? Does it happen every time you save an individual file? Does it happen every time you save multiple files? Any info will help me track it down.

Thanks!
Dan

[oyve]

I'm also experiencing this issue

Firefox 49.0.2

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.43
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

[arielfaur]

@danbucholtz I have been testing for a while and it looks like a race condition but I cannot seem to find a pattern. It looks as though sometimes the webpack update task is triggered before transpile has finished and therefore it does not see the newly generated js (but I am not certain about that either).
As you can see here it seems to be very random...

[waybackrider]

As of Version 0.0.44 this Problem seems to be gone, at least for me

[comfortme]

yes it seems it's gone for me too with 0.0.44.

[arielfaur]

Unfortunately I keep seeing this issue with 0.0.44

[danbucholtz]

There is definitely an issue with updating templates that I am fixing today. It was a regression in a large refactor we did a week or so ago.

Have any of you seen instances where Typescript code changes don't get put into the bundle? I believe so, but I have never been able to recreate it.

Thanks,
Dan

[arielfaur]

@danbucholtz Yes, that is exactly what's happening I believe. Whenever I inspect the code with Chrome tools the changes are not there.

[danbucholtz]

@arielfaur, can you recreate this with the latest version of app-scripts?

npm install @ionic/app-scripts@nightly

Thanks,
Dan

[arielfaur]

@danbucholtz I created a brand new Ionic project and it all started working. It seems that dependencies were somehow messed up, even after wiping the node_modules and running npm install. So after creating a new project it worked fine and I also started seeing the new screen overlay that says "Building..."

[msegers]

@danbucholtz

For what it's worth, I've got app-scripts working with webpack etc. But livereload just doesn't work for me at all. I just get an empty white screen with no console logging (My first line in my bootstrap class is a console.log (main.dev)). I do see this all the time:

16:15:23]  build finished in 33 ms MEM: 349.4MB 

Error: channel closed
    at ChildProcess.target.send (internal/child_process.js:523:16)
    at Object.send (/Users/mathijs/projects/eu.liquix.kruidvat/node_modules/awesome-typescript-loader/src/checker/send.ts:24:35)
    at Checker.req (/Users/mathijs/projects/eu.liquix.kruidvat/node_modules/awesome-typescript-loader/src/checker/checker.ts:87:21)
    at Checker.getFiles (/Users/mathijs/projects/eu.liquix.kruidvat/node_modules/awesome-typescript-loader/src/checker/checker.ts:133:21)
    at Compiler.<anonymous> (/Users/mathijs/projects/eu.liquix.kruidvat/node_modules/awesome-typescript-loader/src/instance.ts:343:40)
    at next (/Users/mathijs/projects/eu.liquix.kruidvat/node_modules/tapable/lib/Tapable.js:83:14)
    at Compiler.<anonymous> (/Users/mathijs/projects/eu.liquix.kruidvat/node_modules/webpack/lib/CachePlugin.js:61:4)
    at Compiler.applyPluginsAsync (/Users/mathijs/projects/eu.liquix.kruidvat/node_modules/tapable/lib/Tapable.js:85:13)
    at /Users/mathijs/projects/eu.liquix.kruidvat/node_modules/webpack/lib/Compiler.js:476:10
    at Compilation.applyPluginsAsync (/Users/mathijs/projects/eu.liquix.kruidvat/node_modules/tapable/lib/Tapable.js:73:70)
Error: channel closed
    at ChildProcess.target.send (internal/child_process.js:523:16)
    at send (/Users/mathijs/projects/eu.liquix.kruidvat/node_modules/awesome-typescript-loader/src/checker/send.ts:24:35)
    at /Users/mathijs/projects/eu.liquix.kruidvat/node_modules/awesome-typescript-loader/src/checker/send.ts:35:47
    at Array.forEach (native)
    at /Users/mathijs/projects/eu.liquix.kruidvat/node_modules/awesome-typescript-loader/src/checker/send.ts:35:30
    at _combinedTickCallback (internal/process/next_tick.js:71:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

one out of like 20 runs, it actually does live-reload a few times. It's absolutely random for me and this error is always there after the initial build (live-reload).

Oh I'm not on windows:

OSX sierra
Macbook pro 2013 ish with pretty decent specs if that's relevant.
Serving in chrome, but errors occur in the node process

[danbucholtz]

@msegers,

Curious, I see awesome-typescript-loader in there but we don't use awesome-typescript-loader. What are you doing in your project?

Thanks,
Dan

[msegers]

@danbucholtz To be honest I don't know the difference, was just expecting Awesome loader to have more features. I didn't really think that through. I had a lot of troubles to get my project to compile and when it worked I just switched to awesome ts.

I'll report back after changing it to see if that causes problems.

[msegers]

@danbucholtz It does recompile now it however seems to fail on cordova plugins like my fabric one, only on reload not on initial.

Maybe I can just fix that though. Thanks for the assist.
I don't think that plugin has ts in it anyway so I could probably exclude it somewhere.

Typescript Error
File '/Users/mathijs/projects/some.client.name/www/build/plugins/cordova-fabric-plugin/typings/cordova-fabric-plugin.d.ts' not found.
www/build/plugins/cordova-fabric-plugin/typings/cordova-fabric-plugin-tests.d.ts
declare var fabricApi: FabricPlugin.FabricPluginStatic;
declare var answersApi: FabricPlugin.Answers;

[warlockdn]

its too much irritating. sometimes the functions don't load, sometimes the providers doesn't load. Please let us know a solution.

Thanks

[leo-freitas]

Please, @danbucholtz, reopen this issue. It is still happening.

[madhawa-se]

yes still happening .show errors in old codes.sometimes i have to stop and serve again

[tomavic]

Know what?
I have provided two solutions above, although nowadays I am facing the issue that I have to refresh manually after ion scripts refresh. So changes are reflected after 2 refreshments !!

[Nostrus]

None of the above tips helped unfortunately, but what I've found is that there's something wrong with ionic-cache under Cache Storage.
Only after manually removing build/main.js from under Cache storage could I see the new version of a page.

After further digging I managed to short-term solve the problem by commenting out the assets cached in service-worker.js. Not an ideal solution, but at least I'm able to work now :)

[joaofernandez]

@tomavic Thanks, I solved this on linux by installing npm install ws@3.3.2 --save-dev --save-exact and when I ran ionic serve I got this message:

{ Error: watcher error: /home/joao/dev/ionic3/Planlink/home/joao/dev/ionic3/Planlink/src/**/*.(ts|html|s(c|a)ss): Error: watch /home/joao/dev/ionic3/Planlink/src/app ENOSPC

And finally solved this by running:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Found this fix here: https://stackoverflow.com/questions/16748737/grunt-watch-error-waiting-fatal-error-watch-enospc

[samir-kamble]

me too facing same issue in mac operating system
ionic-team/ionic-framework#14431

[SonGokuSSGSS5]

Short description of the problem:

i am facing an issue on Windows 10

1. Where the app is unable to recognize my updated visual studio code
2. Live Reloading is not happening

What behavior are you expecting?

When saving the changes should be reflected.

Steps to reproduce:

1.Run ionic serve then open chrome for localhost:8100
2.Edit some file in the project and save

Build Version :
$ ionic info

cli packages: (C:\Users********\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : browser 5.0.3
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v10.1.0
npm  : 6.0.1
OS   : Windows 10

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

Some Errors:

This was the error i got ->

It was saying that "support()" is not a function .
The "Black box "shows the code it refers to . I have removed any trace of the word "support()" in the code and yet it refers to the old code ......
I have added two more functions which the app still did not recognize .

Note :
The above issue persists despite
1. Refreshing the browser a lot of times
2. Saving the code a lot of times
3. Uninstalling and Re-installing the entire ionic, cordova, Visual Studio Code and other
softawares too

Any help would be Appreciated and Thanks in Advance ^-^

[HeroCC]

I have found this happens most often (at least for me) in providers and global files, and much less so in pages.

[ghost]

The only thing that works for me, after check out node/npm installs, was:

[IsaacSomething]

Why is this issue closed? Issue still occurring, particularly when importing components into page modules, the component never updates on the first save, every save has to be done twice.

[samir-kamble]

You need to put your project files in directory that is completely writable by ionic.

Else, it will not work. I got mine working by moving projects to fully writable directory.

[nazzal88]

@tomavic -> Working With Me, Thanks

[tomavic]

This is the longest thread I have ever seen! and no one knows if it is a real problem with ionic or no !

At least any new comer should see a consistent solution or know what it's related to ?

[MaTToX3]

Changes in components are not reflected, no matter how many times I save the file - only .scss file is reflected. I have to manually "ionic serve --no-open" everytime I make a small change inside components. It's annoying.

EDIT
Actually, what I found out is that, if I make a change in component's .ts file, changes are reflected, so now I end up inserting and deleting blank line when I am changing .html file. It's lame but still better than doing "ionic serve" over and over again.

[samir-kamble]

Well It is purely because of ionic not able to write in temp files while doing live reload. So it is becasue of file write permission issue.

I have resolved the problem by giving file permissions to 777.

[0x00c]

Same here. Changing something in .html or .ts triggers new build, but the changes are not part of what Ionic serves. Even if I change both .ts and .html at the same time.

It makes no difference which browser I use. Also reloaded doesn't help. All proposed solutions didn't work either. I'm on Windows 10 Enterpris v1709 x64, Ionic 3.9.2, Ionic App Scripts 3.1.6, Angular Core 5.1.2 and Node 10.9.0

[gustavshf]

Experiencing the same issue with Ionic 3.9.2 on Windows 10.

[ikishanoza]

Verified in windows 10 here is the details for my environment

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.11.2
    npm               : 3.10.10
    OS                : Windows 10 

[alainm23]

The same problem with a clean installation on ubuntu and ionic, solve it using this code:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

[array-digital]

How can that be done on windows? Thanks Craig Deeming

…

On 1 October 2018 at 16:08, Alain ***@***.***> wrote: The same problem with a clean installation on ubuntu and ionic, solve it using this code: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#363 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABOJBNJ6kGqJ0eYARpDiqzJpHnqRdNvAks5ugi_YgaJpZM4Kvd9O> .

[nicothed]

I have the exact same problem (2 years later...?): I save, the "quick build" starts, my page refreshes, but with the old code. I have to re-refresh the page to get the new code. This happens every time.

Is there maybe a way to delay the "watch", like nodemon's "delay" option?

Note that, for a brief period, I've had the same behavior with Node (another project, without Angular) when I switched to VS Code. It seems to have disappeared though.

MacOS 10.10.5, ionic-angular 3.9.2, VS Code, Chrome.

[lesgilles]

i solve the problem using alainm23 comment, but changed the last -p to -a

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -a

[kgeoir]

I try to look into MacOS Sysctl to find where we can increase the number of event watch by a user as per @lesgilles comment but I cant find the one. Any idea?

[JohnGrisham]

I was using ionic capacitor and re initialized capacitor with these steps - https://capacitor.ionicframework.com/docs/getting-started/with-ionic/

I then re ran npx cap copy and npx cap update and re ran electron in chromium and everything copied over.

[RohanBolusani]

Same here. Changing something in .html or .ts triggers new build, but the changes are not part of what Ionic serves. Even if I change both .ts and .html at the same time.

It makes no difference which browser I use. Also reloaded doesn't help. All proposed solutions didn't work either. I'm on Windows 10 Enterpris v1709 x64, Ionic 3.9.2, Ionic App Scripts 3.1.6, Angular Core 5.1.2 and Node 10.9.0

hey did you find a solution??

[RohanBolusani]

hey! did you find any solution please help!

[JohnGrisham]

RohanBolusani This is a little embarrassing to admit but my issue was that I had made another copy of my project in another location and that I was editing the wrong copy so I couldn't see my edits. Try clearing your cache and service workers in whatever browser you use. Then rebuild your project ensure that the updated code was saved first and reserve your build after completing these steps. Let me know if you still have issues.

[RohanBolusani]

omg! same thing! how could have i done that lol!