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

Salespeople

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

Salespeople

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.

Lauro

Answer 3

The cli does not compile unless a file is saved. Unless your IDE auto-saves there will be no reload prior to hitting Ctrl+S.

However you could still use the --no-live-reload option to not reload the browser on change or --poll to increase the timespan between the change detections.

Refer to the official documentation for the options.

Pub

It's the 21 century and angular can't check if hash have been changed to determine whether it needs to recompile or not... Awesome! – Cagle

Answer 4

WebStorm actually has this written in the settings (Ctrl+Alt+S) - Appearance & Behavior - System Settings at the bottom of the page: "Autosave cannot be disabled completely. How it works" and the link takes you here https://www.jetbrains.com/help/webstorm/2021.3/saving-and-reverting-changes.html

Nostology