Resolved! | FATAL ERROR: JavaScript heap out of memory During Angular NG Serve

In this article, we’ll discuss, how to resolve the “JavaScript heap out of memory” which we face due to insufficient memory allocated to Javascript operations.

Sometime back I faced a similar kind of issue while working on my Angular project.

Like normal day to day tasks I executed the “<strong>ng serve --open</strong>” command to run my project in the browser, but suddenly I faced a very strange issue which looked as shown below:

<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 00007FF72C01B49D]
    1: StubFrame [pc: 00007FF72BFA1941]
Security context: 0x02873e7c08d1 <JSObject>
    2: addMappingWithCode [00000302E7B35E09] [C:\projects\my-app\node_modules\webpack-sources\node_modules\source-map\lib\source-node.js:~150] [pc=000003C998902E57](this=0x03734f5422c9 <GlobalObject Object map = 00000030A7C4D729>,0x0084f88491f1 <Object map = 0000010F223E55F9>,0...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF72B405F0F napi_wrap+114095
 2: 00007FF72B3B0B96 v8::base::CPU::has_sse+66998
 3: 00007FF72B3B1996 v8::base::CPU::has_sse+70582
 4: 00007FF72BBC6E9E v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF72BBAEF71 v8::SharedArrayBuffer::Externalize+833
 6: 00007FF72BA7B1DC v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
 7: 00007FF72BA86410 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
 8: 00007FF72BA82F34 v8::internal::Heap::PageFlagsAreConsistent+3204
 9: 00007FF72BA78733 v8::internal::Heap::CollectGarbage+1283
10: 00007FF72BA76DA4 v8::internal::Heap::AddRetainedMap+2452
11: 00007FF72BA980ED v8::internal::Factory::NewFillerObject+61
12: 00007FF72B7FE231 v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1665
13: 00007FF72C01B49D v8::internal::SetupIsolateDelegate::SetupHeap+546637
14: 00007FF72BFA1941 v8::internal::SetupIsolateDelegate::SetupHeap+48113
15: 000003C998902E57 
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! `ng serve -o`
npm ERR! Exit status 134

 

What’s this issue?

This issue appeared due to lots of packages modules were getting used in my application project due to which the javascript engine was not getting enough allocated memory to perform some temporary stuff like compiling the source code and building the source bundles.

 

How to resolve this issue?

To resolve this issue, we need to allocate more space for node operations. You can add a configuration inside the package.json npm scripts as shown below:

we generally have this command in the “scripts” property of the package.json :

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

 

So we need to update the commonly used scripts like “start“, “build” etc as shown below:

"scripts": {
    "ng": "ng",
    "start": "node --max_old_space_size=2192 ./node_modules/@angular/cli/bin/ng serve",
    "build": "node --max_old_space_size=2192 ./node_modules/@angular/cli/bin/ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

You can notice above, we’ve added the node command with space allocation configuration allocating 2GB of data for our node operation.

If you face the “JavaScript heap out of memory” issue again try increasing the space to 4192 or 8192 etc.

 

Hope this will resolve the issue….