Random reloads Angular 4 (live-reload)

Question

I am currently working on a project in Angular 4 and for some reason I keep experiencing random reloads when I am previewing the app on a browser. (I am running in prod mode). Anyone experiencing the same issue? Any solution found? Thanks.

Noon

I also experience this on windows 7, but I'm leaning toward it being Visual Studio Code triggering the live-reload. – Vent

Yes indeed it is VS Code triggering it – Noon

If you're talking about angular-cli , You might have an antivirus or something similar. Or your editor could do something. someone is writing to node_modules or source. – Sandiesandifer

It's no virus, but I'm also thinking it could be the encryption the company has running on my laptop. The random live reloads happen more frequently the longer I have Visual Studio Code running. Sometimes, just switching file tabs in VSC triggers an Angular-CLI rebuild. If anyone has a good way to debug Webpack to determine which file it thinks has changed to trigger the reload, that would help. – Vent

ohhhh yeah, that's exactly what it is. we're company runs some stuff on Mondays and we always get reloaded in Angular2, thats how we know the company is checking us :D – Sandiesandifer

If your router has been hacked.... What happens if you do 192.168.1.1? Does it hang? If so reset the thing and change passwords when tethered to ethernet cable and wi-fi disabled... And it happens in multiple browsers variants at same time. – Violist

Is your VSCode set to automatically save? – Upu

@WesleyCoetzee No it is not. – Noon

It looks like something dispatching changes? I suggest you download some tool for listening folder for changes. It might be useful to fix that problem. nirsoft.net/utils/folder_changes_view.html – Luxury

Try running application from CMD without VScode opened. It it doesnt reload then VSCode is the bug, you may try reinstalling it or use other IDE – Iliac

Answer 1

As already explained its a feature provided by your code editor, currently I am using visual studio code and if you read the documentation, it clearly mentions this feature as a live update. Whenever you save your changes, Visual studio triggers an event which compiles your code via the instance of cmd you are sharing data to the port.

Just take some time out reading the documentation for VS code, it has added a bulk of feature especially to support Angular development.

https://code.visualstudio.com/docs/nodejs/angular-tutorial

Spoilt

Answer 2

Your page will be refreshed every time, when watching files will be changed and saved. Normally it happens on every regular save (expected behavior), but in most IDEs you can On/Off autosaving, so if it's On, for example WebStorm saves changes on every frame deactivation and page reload occurs. I suggest, that other IDEs have totally the same behavior. Here is info, how to trigger autosave

in WebStorm:

https://www.jetbrains.com/help/webstorm/saving-and-reverting-changes.html#tuning-autosave

in Android Studio:

How to disable Auto Save save in Android Studio

in Sublime Text:

http://lucybain.com/resources/setting-up-sublime-autosave/

Machute

My IDE's auto save feature is off. However, I suspect that the IDE itself was the culprit here. Since I posted my question, Microsoft released several updates to VS Code and I haven't experienced this behavior since. Though I am still not sure what exactly triggers it. – Noon

Answer 3

try to run your app with argument --lr=false,

by default live-reload is true and and a server working for watch mode reload app depending on its setting.

Foxglove

Answer 4

Watch out for empty anchor tags,

<a href="#" (click)="abc()">Click Here </a>

This can cause a reload if abc function has return type void or you don't do a return false.

Mccullum