Error: ENOSPC: System limit for number of file watchers reached angular

Question

I am getting this error while doing my Angular 10 project.

Error from chokidar (/myProject): Error: ENOSPC: System limit for number of file watchers reached, watch '/myProject/tsconfig.spec.json'

Is there a method to resolve this error?

Answer 1

You're running into a kernel limit with your inotify watchers. You can run this to fix it for the current boot,

sudo sysctl -w fs.inotify.max_user_watches=524288

You can run this to fix it for future boots,

echo "fs.inotify.max_user_watches=524288" \ 
  | sudo tee -a /etc/sysctl.conf

Answer 2

I got this in vs code when doing ssh. I think the problem was that vs code was watching all the files in my node_modules folder. To solve this in vs code I went to:

File > Preferences > Settings, and then to the little paper icon at the top of the settings page. This takes you to the settings.json file vs code uses. Then I added this to the settings file and it solved the problem:

"files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/samples": true
},

Answer 3

I found this post and helped me to solve that problem. All you have to do is change the max_user_watches

Error ENOSPC System limit for number of file watchers reached

Answer 4

Use below

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf

To increase the number of watches by your system

Answer 5

# insert the new value into the system config

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

**# check the new applied value **

cat /proc/sys/fs/inotify/max_user_watches

Answer 6

watching many files can result in a lot of CPU or memory usage. so increase the number of file watcher if you really needed.

Here's how to optimize file watching using Webpack and TypeScript configurations:

Using Webpack

if you use webpackJs then we can exclude some files or folders to put it in file watcher using set some ignore file path in webpack.config.js.

webpack.config.js

// webpack.config.js
// try below option for exclude the Node Module folder from File Watcher
module.exports = {
  //...
  watchOptions: {
    ignored: '**/node_modules',
    
    // for multiple file path, declare paths as array element
    // ignored: ['**/files/**/*.js', '**/node_modules'],
  },
};

// In addition, you can specify an absolute path:
watchOptions: {
    ignored: [path.posix.resolve(__dirname, './ignored-dir')],
},

For More details see this

---

Using TsConfig

we can exclude some files or folders to put it in file watcher using set excludeDirectories and excludeFiles options inside watchOptions option of tsconfig.json file. (only for --watch. it might not works for ng serve command without --watch option)

tsconfig.json

// tsconfig.json
{
  // Some typical compiler options
  "compilerOptions": {
    "target": "es2020",
    "moduleResolution": "node"
    // ...
  },
  // NEW: Options for file/directory watching
  "watchOptions": {
    // Use native file system events for files and directories
    "watchFile": "useFsEvents",
    "watchDirectory": "useFsEvents",
    // Poll files for updates more frequently
    // when they're updated a lot.
    "fallbackPolling": "dynamicPriority",
    // Don't coalesce watch notification
    "synchronousWatchDirectory": true,
    
    // Finally, two additional settings for reducing the amount of possible
    // files to track  work from these directories
    "excludeDirectories": ["**/node_modules", "_build"],
    "excludeFiles": ["build/fileWhichChangesOften.ts"]
  }
}

For More details see this