IntelliJ IDEA + Angular ng-serve recompile on every change

Question

I am developing an Angular application using IntelliJ IDEA. I run ng server in the terminal window. angular cli automatically recompile whenever I change any code, and causes the browser constantly reloading. I would like angular cli to recompile only when I click "build project" icon or press Ctrl+S. I have spent hours looking at both IntelliJ and angular cli, but could not find anything on how to make it happen. Please help if you know how

Answer 1

Finally find the settings in IntelliJ.

Go to [Settings ->Appearance & Behavior ->System Settings] and uncheck the following options:

• Synchronize files on frame or editor tab activation
• Save files on frame deactivation
• Save files automatically if application is idle for [] sec

Answer 2

Live Reload on saving is Angular CLI feature that can be disabled by passing --no-live-reload to ng serve. But it only rebuilds and reloads the page on explicit Save, not on each file change. To make it work on hitting Ctrl+S only, you need to disable auto-saving in IDEA. IDEA doesn't normally auto-save files on each key pressing. If it only happens while debugging your app, check if Live Edit (that is active during debug session) is enabled in Settings | Build, Execution, Deployment | Debugger | Live Edit - it auto-saves files to provide live reload. Some other plugins can also be responsible for auto-saving - for example, third-party SonarLint and ESLint plugins are known for causing such issues, as they save files to run analysis on the changes, etc.