Slow performance and high CPU usage on ng serve and ng serve --aot

[tebantebanteban]

When run "ng serve" or "ng serve --aot" CPU usage is upper 100% and performance is so bad.

Recompiling take about 3 minutes on reload page.

environment

Angular CLI: 6.1.1
Node: 10.7.0
OS: darwin x64
Angular: 6.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.7.1
@angular/cli                      6.1.1
@ngtools/webpack                  6.0.8
@schematics/angular               0.7.1
@schematics/update                0.7.1
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.8.3

[clydin]

Most likely cause is that fsevents is not present within the project. This should have been installed automatically. fsevents is used to provide OS-level file watching support on MacOS. Without it polling is used which is CPU intensive. To confirm please run npm ls fsevents within the project.

[tebantebanteban]

@clydin I've run npm ls fsevents and get the following

MacBook-Pro-de-Esteban:apex-angular estebanrodriguez$ npm ls fsevents
apex@5.1.0 /Users/estebanrodriguez/Documents/htdocs/newvesti/apex-angular
├─┬ @angular/compiler-cli@6.1.0
│ └─┬ chokidar@1.7.0
│   └── fsevents@1.2.4  deduped
├── fsevents@1.2.4 
└─┬ karma@2.0.5
  └─┬ chokidar@2.0.4
    └── fsevents@1.2.4  deduped

my package.json is this:

{
  "name": "apex",
  "version": "5.1.0",
  "license": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "^6.0.4",
    "@angular/common": "^6.0.4",
    "@angular/compiler": "^6.0.4",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.0.4",
    "@angular/http": "^6.0.4",
    "@angular/platform-browser": "^6.0.4",
    "@angular/platform-browser-dynamic": "^6.0.4",
    "@angular/platform-server": "^6.0.4",
    "@angular/router": "^6.0.4",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "@ngrx/store": "^6.0.1",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@swimlane/ngx-charts": "^8.0.2",
    "@swimlane/ngx-datatable": "^13.0.1",
    "@types/chartist": "^0.9.40",
    "@types/d3-shape": "^1.2.3",
    "@types/jquery": "^3.3.2",
    "angular-calendar": "^0.25.2",
    "bootstrap": "4.0.0",
    "chartist": "^0.11.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.7",
    "d3": "^5.4.0",
    "datatables.net": "^1.10.15",
    "fsevents": "^1.2.4",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "ng-chartist": "^1.1.1",
    "ng2-charts": "^1.6.0",
    "ng2-dragula": "^1.5.0",
    "ng2-file-upload": "^1.3.0",
    "ng2-img-cropper": "^0.9.0",
    "ng2-nouislider": "^1.7.11",
    "ng2-smart-table": "1.2.2",
    "ng2-validation": "^4.2.0",
    "ngx-chips": "^1.9.2",
    "ngx-quill": "^3.0.0",
    "ngx-toastr": "^8.7.3",
    "ngx-ui-switch": "^6.0.3",
    "node-sass": "^4.9.0",
    "nouislider": "^11.1.0",
    "resize-observer-polyfill": "^1.5.0",
    "rxjs": "^6.2.0",
    "screenfull": "^3.3.1",
    "sweetalert2": "^7.22.0",
    "videogular2": "^6.2.0",
    "web-animations-js": "^2.2.5",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.6.8",
    "@angular/cli": "^6.1.1",
    "@angular/compiler-cli": "^6.0.4",
    "@angular/language-service": "^6.0.4",
    "@types/core-js": "^2.5.0",
    "@types/jasmine": "^2.8.8",
    "@types/node": "^10.3.1",
    "codelyzer": "^4.3.0",
    "jasmine-core": "^3.1.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^2.0.2",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.1.0",
    "protractor": "^5.3.2",
    "rxjs-compat": "^6.2.0",
    "ts-node": "^6.1.0",
    "tslint": "^5.10.0",
    "typescript": "^2.7.2"
  }
}

[clydin]

Is the application constantly rebuilding? Also is this reproducible with a brand new project?

[jokecamp]

I had the same issue with:

node 10.8.0 and npm 6.2.0 and OSX 10.13.6

I was able to temporarily resolve the CPU and node-gyp errors by running this in my local project:

npm install fsevents@1.2.3

[orosoiu]

I had the same issue, even with an older version of fsevents installed (1.1.3). I had to specifically install fsevents@1.2.3, as per jokecamp's comment, to fix this problem.

[filipesilva]

Thanks for reporting this issue. This issue was originally reported a long time ago and since then we've had many releases, one of which might have addressed this problem. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[doronsever]

Well, I don't know if it is related or not but when I'm on node v10 and above it takes around 40-50 seconds to load the page and when downgrading to node v9 it takes around 20-30 seconds.
And I tried installing latest fs-events

[askdesigners]

I find it remarkable that the Angular build process is so crap. I regularly have to run a prod build twice on our 4gb mem server as it completely hoses the CPU and memory. A vue or react build of similar size takes 1/5 of the resources.

[shinde-prasad]

@jokecamp I have the same issue, I tried install fsevents 1.2.3 but it gave me following error

npm ERR! notsup Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Do you have any other solution for Linux o.s