high CPU usage on ng serve

[linocatucci]

hello,

i am running Angular version 8.2.6 with Node version 12.16.0 on a MacBook Pro.
MacBook Pro
macOS Catalina version 10.15.4

When run "ng serve" or "ng serve --aot" CPU usage is upper 100% and performance is really bad.
I have installed fsevents, which is now version 2.1.2, but still there is a high cpu consumption.

{
  "private": true,
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "build": "npm run build:prod",
    "build:dev": "ng build --dev",
    "build:prod": "ng build --prod --source-map --base-href /sap/bc/ui5_ui5/sap/z_crm_soul/",
    "build:prod:stats": "ng build --prod --base-href /sap/bc/ui5_ui5/sap/z_crm_soul/ --stats-json",
    "build:prod:sourcemaps": "ng build --prod --sourcemap -v --base-href /sap/bc/ui5_ui5/sap/z_crm_soul/ bundles",
    "build:feature": "ng build --prod --base-href /sap/bc/ui5_ui5/sap/z_crm_soul_test/",
    "serve": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0",
    "serve:aot": "ng serve --aot --sourcemap --proxy-config proxy.conf.json --host 0.0.0.0",
    "serve:prod": "ng serve --live-reload false --prod --proxy-config proxy.conf.json --host 0.0.0.0",
    "serve:prod:reload": "ng serve --prod --proxy-config proxy.conf.json --host 0.0.0.0",
    "start": "run-p -r mockserver serve",
    "start:aot": "run-p -r mockserver serve:aot",
    "start:prod": "run-p -r mockserver serve:prod",
    "start:prod:reload": "run-p -r mockserver serve:prod",
    "start:sap:du1": "ng serve --proxy-config sap.conf.du1.json",
    "start:sap:ku1": "ng serve --proxy-config sap.conf.ku1.json",
    "start:sap:du1:aot": "ng serve --aot --proxy-config sap.conf.du1.json",
    "start:sap:ku1:aot": "ng serve --aot --proxy-config sap.conf.ku1.json",
    "test": "jest --watch=all",
    "test:staged": "jest --findRelatedTests --bail --passWithNoTests",
    "test:once": "npm run test:jest",
    "test:jest": "jest --watch",
    "test:ci": "jest --ci --reporters=jest-junit --reporters=default --coverage --coverageReporters=cobertura --coverageReporters=html",
    "test:coverage": "jest --coverage",
    "test:coverage-copy": "copy \"coverage\\lcov-report\\index.html\" \"test-coverage\\index.html\"",
    "test:coverage-rename": "renamer --find index.html --replace %npm_package_version%.html test-coverage/* --force",
    "lint": "ng lint",
    "lint:fix": "ng lint --fix",
    "ts:linter": "tslint -p ./src/tsconfig.json",
    "ts:check": "tsc --project ./src/tsconfig.json",
    "e2e": "run-p -r start:prod cypress:wait:run",
    "increase-memory-limit": "increase-memory-limit",
    "commit": "git-cz",
    "mockserver": "node ./mocks/sap/mocks.js",
    "check:lint": "run-s ts:check lint:staged",
    "lint:staged": "lint-staged",
    "prepare-commit-msg": "validate-commit-msg",
    "pretty-quick": "pretty-quick --staged",
    "sprite": "svg-sprite -C sprite.conf.json src/svgs/**/*.svg",
    "docs": "compodoc -p src/tsconfig.json --hideGenerator --open --serve --theme readthedocs",
    "prettier:all": "prettier --write \"**/*.{css,js,json,md,scss,ts}\"",
    "cypress:open": "cypress open",
    "co": "cypress open",
    "cypress:headed": "cypress run --headed",
    "cypress:run": "cypress run",
    "cypress:spec": "cypress run --spec ./cypress/integration/processes/move/move-in-multisite_spec.js",
    "cypress:wait:run:original": "wait-on http-get://localhost:9001 && wait-on http-get://localhost:3000/sap/opu/odata/sap/Z_CRM_ODATA_SRV && wait-on http-get://localhost:4200 && cypress run",
    "cypress:wait:run": "wait-on http-get://localhost:3000/sap/opu/odata/sap/Z_CRM_ODATA_SRV && wait-on http-get://localhost:4200 && cypress run --reporter junit",
    "release-major": "standard-version -a --no-verify --release-as major",
    "release-minor": "standard-version -a --no-verify --release-as minor",
    "release-patch": "standard-version -a --no-verify --release-as patch",
    "install:skip-cypress": "CYPRESS_SKIP_BINARY_INSTALL=1 npm install",
    "decode": "node ./mocks/utils/decode-encode-base64-json/orderDocumentDecoding",
    "encode": "node ./mocks/utils/decode-encode-base64-json/orderDocumentEncoding",
    "storybook": "start-storybook -p 9001 -c .storybook",
    "storybook-build": "build-storybook -c .storybook -o src/assets/.out",
    "osi-mock": "node ./mocks/osi/server.js"
  },
  "dependencies": {
    "@angular/animations": "^8.2.6",
    "@angular/cdk": "^8.2.0",
    "@angular/common": "^8.2.6",
    "@angular/compiler": "^8.2.6",
    "@angular/core": "^8.2.6",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "^8.2.6",
    "@angular/material": "^8.2.0",
    "@angular/platform-browser": "^8.2.6",
    "@angular/platform-browser-dynamic": "^8.2.6",
    "@angular/router": "^8.2.6",
    "@ngrx/effects": "^8.3.0",
    "@ngrx/router-store": "^8.3.0",
    "@ngrx/store": "^8.3.0",
    "@ngx-pwa/local-storage": "^8.2.2",
    "@ngx-translate/core": "^11.0.1",
    "angular2-notifications": "^2.0.0",
    "applicationinsights-js": "1.0.20",
    "babel-loader": "8.0.5",
    "core-js": "2.6.2",
    "date-fns": "2.0.0-alpha.7",
    "fsevents": "^2.1.2",
    "hammerjs": "2.0.8",
    "iban": "0.0.11",
    "node-sass": "^4.13.1",
    "rxjs": "^6.5.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.25",
    "@angular-devkit/core": "^8.3.4",
    "@angular-devkit/schematics": "^8.3.4",
    "@angular/cli": "^8.3.4",
    "@angular/compiler-cli": "^8.2.6",
    "@angular/language-service": "^8.2.6",
    "@babel/core": "7.2.2",
    "@compodoc/compodoc": "^1.1.10",
    "@ngrx/schematics": "8.3.0",
    "@ngrx/store-devtools": "8.3.0",
    "@storybook/addon-actions": "5.2.0",
    "@storybook/addon-jest": "5.2.0",
    "@storybook/addon-knobs": "5.2.0",
    "@storybook/addon-links": "5.2.0",
    "@storybook/addon-notes": "5.2.0",
    "@storybook/addon-options": "5.2.0",
    "@storybook/addon-storysource": "5.2.0",
    "@storybook/addons": "5.2.0",
    "@storybook/angular": "5.2.0",
    "@types/applicationinsights-js": "1.0.9",
    "@types/faker": "4.1.5",
    "@types/jest": "23.3.13",
    "@types/node": "10.12.18",
    "@types/react": "16.9.2",
    "angular2-template-loader": "0.6.2",
    "angular2-uuid": "1.1.1",
    "autoprefixer": "^8.1.0",
    "babel-core": "6.26.3",
    "babel-jest": "^25.1.0",
    "codelyzer": "^5.1.0",
    "commitizen": "^3.0.7",
    "connect": "3.6.6",
    "cypress": "^3.4.1",
    "cz-conventional-changelog": "2.1.0",
    "electron": "4.0.1",
    "faker": "4.1.0",
    "husky": "^4.2.3",
    "increase-memory-limit": "1.0.6",
    "jest": "^25.1.0",
    "jest-junit": "^10.0.0",
    "jest-preset-angular": "7.1.1",
    "lint-staged": "8.1.0",
    "mocha": "5.2.0",
    "ng-apimock": "^1.4.9",
    "ng2-mock-component": "0.1.1",
    "ngx-wallaby-jest": "0.0.1",
    "npm-run-all": "4.1.5",
    "prettier": "1.16.0",
    "pretty-quick": "1.10.0",
    "protractor": "^5.4.2",
    "renamer": "^1.1.1",
    "rxjs-tslint-rules": "4.15.0",
    "standard-version": "^7.1.0",
    "svg-sprite": "1.5.0",
    "to-string-loader": "1.1.5",
    "ts-helpers": "1.1.2",
    "ts-node": "7.0.1",
    "tslint": "5.12.1",
    "tslint-config-airbnb": "5.11.1",
    "tslint-config-prettier": "1.17.0",
    "tslint-consistent-codestyle": "1.15.0",
    "tslint-eslint-rules": "5.4.0",
    "typescript": "^3.5.3",
    "validate-commit-message": "3.0.1",
    "wait-on": "3.2.0",
    "wallaby-webpack": "3.9.13",
    "watch": "1.0.2",
    "zone.js": "^0.9.1"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "standard-version": {
    "scripts": {
      "precommit": "git add ."
    },
    "skip": {
      "tag": true
    }
  },
  "lint-staged": {
    "src/**/*.ts": [
      "tslint -p ./src/tsconfig.json --fix",
      "npm run pretty-quick",
      "git add"
    ],
    "mocks/**/*.json": [
      "npm run pretty-quick",
      "git add"
    ],
    "cypress/**/*.js": [
      "npm run pretty-quick",
      "git add"
    ]
  },
  "husky": {
    "hooks": {}
  }
}

Does anybody has any ideas how to solve this.
Cheers,
Lino

[alan-agius4]

Hi @linocatucci, is it possible to share a reproduction or a link to your project?

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[spock123]

@linocatucci I also run into this from time to time but it's difficult to reproduce.. can I just say thank you for introducing me to the "standard-version" npm module.. didn't know it and it seems pretty helpful. Sorry for the off topic.

Fwiw I*m also using a Macbook Pro with Node 12 and it happens to me maybe once a day.

Have you tried updating to Angular9?

[linocatucci]

Hello All, I have installed my project on a new MacBook and I don't have this problem any more. Very weird because I don't have fsevents installed at all at the moment...
Anyway, I can't reproduce it myself now.

[alan-agius4]

Closing as per above comment.

[dean-g]

I am facing same issue now. after mac update, my cpu usage gone 400%. please advise

[linocatucci]

I solved the problem bij installing fsevents: npm i fsevents, you can install it globally with -g too. Verstuurd vanaf mijn iPhone

…

Op 24 apr. 2020 om 01:24 heeft Dean ***@***.***> het volgende geschreven:  I am facing same issue now. after mac update, my cpu usage gone 400%. please advise — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[dean-g]

I installed locally as well as globally (npm i fsevents -g). but, still, the problem is not solved. my CPU utilization is 400% and above

my mac version is: 10.15.4

[Kiedro]

Had the same issue, the problem was in updating MacOs to Catalyna. fsevents was installed in all my projects, but was not used due to failing node-gyp instalation, as a result files were pooled by watcher and ng serve was constantly consuming ~50% CPU on my 2-core MBP.

The solution is to reinstall CommandLineTools and then reinstall fsevents in the project.
So first:
nodejs/node-gyp#569 (comment)
Then:
npm i fsevents

[rovio-daniel-jackson]

I had this fixed a month ago, by installing fsevents now it's returned :(

• OSX Mojave
• fsevents 2.1.3

Update The following helped me: https://stackoverflow.com/questions/61816143/angular-cli-ng-serve-high-cpu-usage-from-node-process (use polling)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}