ng serve command throws JavaScript heap out of memory exception

I recently came across an exception while serving the application on my localhost. There are two different exceptions encountered while serving the app:

  • FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
  • FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory

Command to serve the application:

ng serve --port=1234

The command line throws JavaScript heap out of memory exception and terminates the process. After some debugging I found out that the below piece of code used in the application is causing the exception:

component.html

<nz-switch [ngModel]="app?.data?.propertyA?.propertyB && subscription" (click)="emit()"></nz-switch>

As per the stack trace it seems there is some issue during the garbage collection process or the compiler may have gone into an infinite recursion:

Changing it to below fixes it:

component.html

<nz-switch [ngModel]="getModel()" (click)="emit()"></nz-switch>

component.ts

getModel(): boolean {
    return this.app?.data?.propertyA?.propertyB && this.subscription;
}

The nz-switch component is expected to be binded to a boolean | null in this case through a deep nested object

Below is the stack trace from terminal for both the exceptions:

muhammadfaizanuddin@MacBook-Pro app % ng serve --port=1234
⠸ Generating browser application bundles (phase: building)...
<--- Last few GCs --->

[3984:0x118008000] 35898 ms: Mark-sweep (reduce) 4092.5 (4113.2) -> 4091.9 (4116.2) MB, 2286.1 / 0.0 ms (+ 0.0 ms in 63 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 2303 ms) (average mu = 0.103, current mu = 0.019[3984:0x118008000] 38054 ms: Mark-sweep (reduce) 4092.9 (4104.2) -> 4092.8 (4104.5) MB, 2153.4 / 0.0 ms (average mu = 0.056, current mu = 0.001) allocation failure scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x10130d6e5 node::Abort() (.cold.1) [/usr/local/bin/node]
2: 0x1000b1c49 node::Abort() [/usr/local/bin/node]
3: 0x1000b1daf node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
4: 0x1001f60f7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
5: 0x1001f6093 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
6: 0x1003a54f5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
7: 0x1003a6fba v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
8: 0x1003a2689 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
9: 0x10039ff21 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
10: 0x1003ae7da v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x1003ae861 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
12: 0x10037bf12 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node]
13: 0x1006fc158 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
14: 0x100a893d9 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
zsh: abort ng serve --port=1234

muhammadfaizanuddin@MacBook-Pro app % ng serve --port=1234
⠸ Generating browser application bundles (phase: building)...

** Angular Live Development Server is listening on localhost:1234, open your browser on http://localhost:1234/ **

✔ Compiled successfully.
⠋ Generating browser application bundles...
<--- Last few GCs --->

[4009:0x118008000] 275856 ms: Mark-sweep (reduce) 4090.8 (4104.9) -> 4090.5 (4105.9) MB, 2083.8 / 0.0 ms (average mu = 0.348, current mu = 0.001) allocation failure scavenge might not succeed
[4009:0x118008000] 279207 ms: Mark-sweep (reduce) 4091.5 (4102.9) -> 4091.3 (4103.9) MB, 3347.9 / 0.0 ms (average mu = 0.167, current mu = 0.001) allocation failure scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory
1: 0x10130d6e5 node::Abort() (.cold.1) [/usr/local/bin/node]
2: 0x1000b1c49 node::Abort() [/usr/local/bin/node]
3: 0x1000b1daf node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
4: 0x1001f60f7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
5: 0x1001f6093 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
6: 0x1003a54f5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
7: 0x100400513 v8::internal::EvacuateNewSpaceVisitor::Visit(v8::internal::HeapObject, int) [/usr/local/bin/node]
8: 0x1003e7c7b void v8::internal::LiveObjectVisitor::VisitBlackObjectsNoFail<v8::internal::EvacuateNewSpaceVisitor, v8::internal::MajorNonAtomicMarkingState>(v8::internal::MemoryChunk*, v8::internal::MajorNonAtomicMarkingState*, v8::internal::EvacuateNewSpaceVisitor*, v8::internal::LiveObjectVisitor::IterationMode) [/usr/local/bin/node]
9: 0x1003e78a5 v8::internal::FullEvacuator::RawEvacuatePage(v8::internal::MemoryChunk*, long*) [/usr/local/bin/node]
10: 0x1003e7516 v8::internal::Evacuator::EvacuatePage(v8::internal::MemoryChunk*) [/usr/local/bin/node]
11: 0x100404e1e v8::internal::PageEvacuationTask::RunInParallel(v8::internal::ItemParallelJob::Task::Runner) [/usr/local/bin/node]
12: 0x1003bffc2 v8::internal::ItemParallelJob::Task::RunInternal() [/usr/local/bin/node]
13: 0x1003c042f v8::internal::ItemParallelJob::Run() [/usr/local/bin/node]
14: 0x1003e9509 void v8::internal::MarkCompactCollectorBase::CreateAndExecuteEvacuationTasks<v8::internal::FullEvacuator, v8::internal::MarkCompactCollector>(v8::internal::MarkCompactCollector*, v8::internal::ItemParallelJob*, v8::internal::MigrationObserver*, long) [/usr/local/bin/node]
15: 0x1003e9141 v8::internal::MarkCompactCollector::EvacuatePagesInParallel() [/usr/local/bin/node]
16: 0x1003d5107 v8::internal::MarkCompactCollector::Evacuate() [/usr/local/bin/node]
17: 0x1003d2993 v8::internal::MarkCompactCollector::CollectGarbage() [/usr/local/bin/node]
18: 0x1003a5bbb v8::internal::Heap::MarkCompact() [/usr/local/bin/node]
19: 0x1003a2169 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
20: 0x10039ff21 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
21: 0x1003ae7da v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
22: 0x1003ae861 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
23: 0x10037bf12 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node]
24: 0x1006fc158 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
25: 0x100a893d9 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
zsh: abort ng serve --port=1234

Environment:

  • Angular CLI: 12.0.1
  • Node: 14.17.0
  • Package Manager: npm 6.14.13
  • OS: macOS Big Sur

Angular: 12.0.1

... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router

Package Version

  • @angular-devkit/architect 0.1200.5
  • @angular-devkit/build-angular 12.0.1
  • @angular-devkit/core 12.0.1
  • rxjs 6.6.0
  • typescript 4.2.3
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum