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.
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.
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.
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
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.
Setting the flag --watch=false is what reduced CPU usage of my angular process from 50% to 0%:
ng serve --configuration=dev --watch=false
Related
I tried to find a duplicate question, there are similar ones but I still don't understand what's going on..
I just installed node and npm on Ubuntu 20.04 with
sudo apt install nodejs npm
And followed the Electron quick start tutorial, and added this line to the beginning of my main.js:
console.log("node version: " + process.versions["node"]);
When I run my app with npm start, I see (both on the console and on the app) node version 16.13.0, but when I run the app with node main, I see the version as 10.19.0, which is also what node -v shows.
I can probably "fix" this issue by updating node, but I would like to understand what is going on here.. Is NPM using a different node version or something?
Thanks
Edit
I tried this with an empty node app, just made npm init and set start: "node index.js" in package.json, this time both node index.js and npm start show the same version (10.19.0) so I'm guessing Electron is somehow reading a wrong node version?
#DJHemath is spot on. Electron has Node and Chromium as internal libraries. IE: Node is a module of Electron.
Therefore, the version you are seeing within your Electron application is the Node version that is bundled with Electron.
When Electron is updated, the versions of Node and Chromium are often updated as well. An overview of this can be seen on the Electron homepage "Releases" cards (latest, beta, alpha and nightly).
Additionally, for historical purposes, version updates of these two dependencies can be seen on the Stable Releases page.
Thus, in summary, changing your system's installed Node version will not affect the version of Node used within your Electron application(s).
I found lots of issues with offered solutions on node using cpu but no one solved my problem - mostly it was said to install fsevents and rebuild, remove node modules and reinstall. Also was offered to add poll:false, but I'm not sure I have web-pack. I'm practicing sass so it's a very simple app having only sass installed as a node module, and the script is:
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css -w"
}
So all I use is live-server and npm run compile:sass.
Versions:
node-sass: "^4.14.1",
Node: "^14.15.0"
I tried to see what's going on with node cpu consumption when running other apps that do not include that script, and the consumption was adequate.
Besides all of that I tried to change versions of node-sass (to 4.13.1) and nodejs (to 14.15.4) and also I deleted the node-sass globally.
Does anyone know what can be the solution?
The problem was in live-server - not in nodejs or node-sass as I thought.
If I understand right, live-server watched node_modules folder which had node-sass watching as well, and that caused such CPU load.
Once node_modules will be ignored by live-server, the problem is solved.
When I try to create the starter React tutorial app using powershell, I get the below error:
"You are using npm 2.15.12 so the project will be boostrapped with an old unsupported version of tools".
"Please update to npm 3 or higher for a better, fully supported experience".
However, my NPM version is 6.11.3 as seen below.
What I have tried:
I have ran powershell as admin as answered in this question and restart.
I have also uninstalled and reinstalled Nodejs completely.
So after an extra hour digging around, I saw a few posts with similar (but not exactly) the same issue. I decided to install Yarn and install with that.
After install, I ran yarn cache clean and ran npx create-react-app your-app and it worked. Sorry for bothering you all.
I had the same problem. I'm running WSL with ubuntu, and yarn cache clear didn't work, but I noticed a node modules directory created in the project. I think it was messing with the node version so I deleted it. It worked
when i run the following command, it shows 6.4.1.
npm run ng --version
but when i am running the following command, it is installing 8.1.0 and getting error. i do not understand how it is happening.
npm install -g #angular/cli
i tried the following commands. but it is not working
npm cache clean --force
npm install -g #angular/cli
Error Screen
My Requirement:
Angular 6
how can i resolve this?
You should the latest (12+) node when upgrading to angular 8. You can download it from here.
After upgrading node, the issues should go away.
For simple use cases and thanks to the work done in Angular 8, you can upgrade to the latest release using one command:
$ ng update #angular/cli #angular/core
After running this command, the lazy loaded routes will be automatically migrated to the new import syntax which is standard compliant and brings Angular close to the open web platform.
You also need to be aware of the following issues when upgrading your project:
Angular 8 makes use of the latest TypeScript 3.4, so even if the upgrade process completes with success you might have some syntax errors that may be due to the better type inference system used by the latest version which detects new potential typing issues but in the end this will improve your code quality and helps you avoid bugs in the future. You can see the new features of TypeScript 3.4 from the official docs.
You need to have Node.js 12+. Simply run node -v to verify your Node version. You can install the latest version from the official website
I have a restriction of using node JS version 6.9.1. I am getting many problems, while using angular cli quick start steps.
after ng serve, browser page will be white, no error in console.
npm start works, but if i change some style/file browser do not not refresh.
if i make any style change, webpack compiled successfully message comes but webserver fails to load page.
When I follow the quick start steps with latest nodejs it works like a charm. Can any one help me in telling, what are the versions (npm, angular-cli), I should use to run it ?
Like
Each Angular/Cli version has limited its compatibility of node versions below a specified release. If you have to use a specific version of node then your best bet would be to find a previous version of the Angular/Cli that will play nicely.
Here you can find all the versions and from there, pick one a little further back in the list and then do a search in google for "Angular/cli version x.x.x node compatibility" to see if there are any known issues.
Once you pick a version that looks good, run
npm install -g #angular/cli#<your version number>.
Once the install is complete run ng help and you'll get feedback right away if the version is still incompatible and you can try a different version.
Just make sure you get rid of the installs you aren't using with npm uninstall -g #angular/cli#<your version number>
for see if angular-cli is compatibility whit your node version installed you can see https://www.npmjs.com/package/#angular/cli/v/6.0.8?activeTab=versions, for example, I have installed node 6.11.2 and I have to use: npm install -g #angular/cli#6.0.0