angular-clihot-module-replacement

How to prevent Angular from reloading my application on changes but still allow it to on save?


As stated in this answer, I can turn off the automatic reload of the window by serving two applications - one with automatic reload and one with manual reload.

ng serve --port=4200
ng serve --port=4201 --live-reload=false

I wonder if there's a way to achieve something in-between, i.e. automatic reload of the application but only when I actually save the file I'm editing, not as soon as I merely change it.

The reason for that is it's rather frequently that I change two of three lines, the result of which is detected and rendered. Then, the third line changed doesn't cause anything to render, like of the hot module swapper forgets it, since it occurs when the re-rending process is being carried out.

It's cost me several hours of debugging and confusion, since I see one thing while I should see another one. That causes me to draw conclusions that are totally wrong, until I realize that it's just Angular lying to me.

Since we're on in-memory based swapping since version 6 or so, I fear that what I need isn't possible to achieve. Doesn't hurt to ask anyway, in case it is.


Solution

  • Turning off auto-save in your IDE will prevent the refreshing/reloading unless you explicitly save changes.

    To do that in Visual Studio Code:

    Menu: File > Preferences > Settings. Search for the term "Save" in the Search setting text box. Locate the entry Files: Auto Save in the results, and set the option to off.

    If you prefer to delay to auto save functionality, set the option to afterDelay, and set the Files: Auto Save Delay option to what ever delay you would like in milliseconds; the default on my install is 1000 (1 second). The adequate number of seconds to delay is a matter of personal preference but should be just a slight bit over the time span of an average edit before a visual check in the GUI needs to be made.