Dev Discovery - Angular stops hot reloading on my VSCode Editor

Normally, your angular app will re-compile after hitting that save (ctrl+s) and will reload your page on the browser. But when your app gets bigger, as I understand it correctly, it will have some memory leak and will stop the hot reloading. A small popup will appear on your VS Code and will give you the following error:

"Visual Studio Code is unable to watch for file changes in this large workspace" (error ENOSPC)

This gives you a notification that you need to increase the size of your watcher to listen for file changes. You can check/view your current watcher size by typing the following on your terminal:

cat /proc/sys/fs/inotify/max_user_watches

I have experienced this using a linux/ubuntu OS, and to resolve this, you can increase the size of the watcher by typing:

$ sudo sysctl fs.inotify.max_user_watches=524288
$ sudo sysctl -p

skip the $ symbol

Your watcher is now updated to listen to 524288 or 512 MB of file changes.

Finally, re-run your app (i.e. ctrl+c and npm start or ng serve).

Resources:

• https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc
• https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details