• Uncategorized

About javascript : Javascript-heap-getting-out-of-memory-when-angular-applciation-is-getting-rebuild-after-running-it-with-ng-serve

Question Detail

I am getting javascript heap out of memory error very frequently after saving changes in my angular application during development (ng serve).

Application is quite complex and having 10-12 modules(lazy loaded. and i am using some JS libraries also (service -> (Thumbnail.js and Three.min.js) ) via importing them in one of my service and calling their method directly.

How can i see what is happening under the hood and how to fix?

I have tried setting max size in NODE_OPTIONS but i can’t keep increasing it.

Error snapshot

⠴ Generating browser application bundles (phase: building)...
<--- Last few GCs --->

[32807:0x5867fb0]  1471297 ms: Mark-sweep (reduce) 2033.5 (2082.1) -> 2032.7 (2082.1) MB, 1484.6 / 0.1 ms  (average mu = 0.141, current mu = 0.003) allocation failure scavenge might not succeed
[32807:0x5867fb0]  1472785 ms: Mark-sweep (reduce) 2033.9 (2082.1) -> 2033.0 (2082.3) MB, 1484.7 / 0.1 ms  (average mu = 0.077, current mu = 0.002) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb02ec0 node::Abort() [ng serve]
 2: 0xa181fb node::FatalError(char const*, char const*) [ng serve]
 3: 0xced88e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [ng serve]
 4: 0xcedc07 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [ng serve]
 5: 0xea5ea5  [ng serve]
 6: 0xea6986  [ng serve]
 7: 0xeb48be  [ng serve]
 8: 0xeb5300 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [ng serve]
 9: 0xeb827e v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [ng serve]
10: 0xe796aa v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [ng serve]
11: 0x11f2e86 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [ng serve]
12: 0x15e7879  [ng serve]
Aborted (core dumped)

My package.json

    {
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng serve",
    "build": "ng build",
    "watch": "ng build --watch",
    "test": "ng test",
    "postinstall": "ngcc",
    "analyze": "webpack-bundle-analyzer dist/myapp/stats.json"
  },
  "private": true,
  "dependencies": {
    "-": "^0.0.1",
    "@angular/animations": "~12.2.0",
    "@angular/cdk": "^12.2.3",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/fire": "^7.2.0",
    "@angular/flex-layout": "^12.0.0-beta.34",
    "@angular/forms": "~12.2.0",
    "@angular/localize": "~12.2.0",
    "@angular/material": "^12.2.3",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "@aws-sdk/client-s3": "^3.41.0",
    "@highcharts/map-collection": "^1.1.3",
    "@types/proj4": "^2.5.0",
    "aws-sdk": "^2.1029.0",
    "firebase": "^9.4.0",
    "highcharts": "^9.1.2",
    "highcharts-angular": "^2.10.0",
    "proj4": "^2.7.4",
    "rxfire": "^6.0.0",
    "rxjs": "~6.6.0",
    "save-dev": "^0.0.1-security",
    "tslib": "^2.3.0",
    "util": "^0.12.4",
    "xlsx": "^0.17.3",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.2",
    "@angular/cli": "~12.2.2",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.20.36",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5",
    "webpack-bundle-analyzer": "^4.5.0"
  }
}

Question Answer

No answer for now.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.