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

Question

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.

Racklin

I didn't realise poll was milliseconds, I had it on 5 -- it was also causing my cpu to spike - thanks for the update – Aram

If you find an answer yourself, post it as an answer; don't edit it into your question – Sclerite

Answer 1

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.

Graiggrail

Working at an Angular 9 project: Installing fsevents calmed down the node process which otherwise was running constantly at ~60% CPU. Now I rarely see it in the Activity Monitor. If using Node 14+ you may install fsevents@2. – Ellery

--poll did it for me – Breuer

If you're on Apple Silicon, the current version of fsevents (2.2.1) doesn't work properly. See: github.com/fsevents/fsevents/issues/349 for a workaround. – Cletuscleve

Why does ng serve use fsevents without telling to use fsevents? How can I tell to use chokidar? – Seed

Answer 2

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.

Jovi

Answer 3

it seems i managed to resolve the problem: delete the /node_module and install again

in my case that helped i found the advise here: https://gitmemory.com/issue/angular/angular-cli/14748/501608887

Laflam

Answer 4

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.

Deberadeberry

Answer 5

Set a time interval for changes check

ng serve --poll 4000

e.g. [4000] is 4 seconds

it will helps with the CPU usage problem

Gittens

Answer 6

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

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

Bootblack