DEV Community

loading...

Dev Discovery - Angular stops hot reloading on my VSCode Editor

emertola profile image emertola ・1 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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:

Discussion

pic
Editor guide