Angular CLI - ng serve - high cpu usage from node process

user_726965 0
Viewed 9120

I am struggling with an issue where on running any angular app locally the node process linked to ng serve is using well over 100% of my CPU core's.

My current environment is:

Angular CLI: 7.3.10 Node: 11.15.0 OS: darwin x64 (Mac OS X Catalina 10.15.4) Angular: 7.2.16

I have come across numerous posts and issues about this where the common solutions appear to be to install fsevents for Mac OS issues.

Things I have tried:

  • Installing XCode Command Line Tools for node-gyp to rebuild fsevents after its installed
  • Install the latest version of fsevents (2.1.3) as an older version is specified as an optional dependency with angular-cli (1.2.13)
  • Using a different node version, tried 12.13.0 and deleting node_modules and doing a clean install. Also tried latest fevents version again
    • Incase its relevant I use nvm also
  • Tried npm rebuild
  • Upgrading one of my apps from Angular 7 to 9, still same behaviour after clean install of dependencies, ensuring fsevents is installed and trying latest version too

No matter what I try, I keep observing high cpu usage, I have seen it creep up too 300-400% at times.

This is really hampering my development and I am hoping someone may have some bright ideas I could try out.

Failing that, I am wondering if I should try uninstalling node completely, getting rid of nvm and starting from scratch.

node-gyp angular webpack node.js fsevents
6 Answers

In Angular development context; transpilation/compilation causes CPU spike. When this happens too frequent, your system is in trouble.

There are certain ways to relieve the pain a little;

  • Turn off file change detection / live-reload / auto compilation entirely

ng serve --live-reload false or ng serve --no-live-reload etc. depending on your Angular CLI version

  • Have a better change detection, react only when really needed

npm install fsevents

npm rebuild fsevents

npm serve

  • Forget change detection, check changes based on a time interval

ng serve --poll [ms]

CPU management is tricky, there can be many reasons for this problem. These are only a few possibilities closely related to Angular development. I hope this answer provides some options to try to the ones having the same trouble.

user_28278200

Maybe you have similar setup for you hot/live reloading on Docker such as ng serve --host 0.0.0.0 --poll 1. The poll value is problematic, change it on something larger, for example 2000, such that ng serve --host 0.0.0.0 --poll 2000.

Now, you'll loose (almost) real-time hot/live reloading, but you'll save your CPU/battery and having 2 seconds delay before your app will refresh the changed code.

user_111273830
user_26609440

If you use Yarn to install packages, its lockfile may have locked in an older version of fsevents which has known issues with node-pre-gyp on Apple Silicon.

https://github.com/nodejs/node-gyp/issues/2296

Simply deleting yarn.lock, and running yarn again, should attempt to install newer versions of the fsevents dependency, which does not have that issue.

This worked with Angular 11.

user_701820

After a lot of digging, I found the below option which works well for me. Before that every time I encounter with JavaScript heap out of memory issue. Tried with custom NODE memory, but noting works for me rather than below one.

ng serve --source-map=false

and

ng build --source-map=false

Works like a charm.

user_22408220

Setting the flag --watch=false is what reduced CPU usage of my angular process from 50% to 0%:

ng serve --configuration=dev --watch=false
user_94501520
Related