Resolving Angular Application Memory Allocation Error

[sacredabhishek]

Discussed in https://github.com/orgs/vivifyhealthcare/discussions/60

^{Originally posted by sacredabhishek February 20, 2024}
Recently encountered a frustrating error while trying to run my Angular application. The error message I'm receiving is as follows

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

Here's some additional context:

• command to execute Angular Application

ng serve --port=4200 --host=0.0.0.0

• full error log

Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disable-host-check" if that's the
case.
✔ Browser application bundle generation complete.

Initial Chunk Files                                     | Names                                     |  Raw Size
vendor.js                                               | vendor                                    |   6.82 MB | 
main.js                                                 | main                                      | 512.77 kB | 
styles.css, styles.js                                   | styles                                    | 398.56 kB | 
polyfills.js                                            | polyfills                                 | 314.31 kB | 
runtime.js                                              | runtime                                   |  12.67 kB | 

                                                        | Initial Total                             |   8.03 MB

Lazy Chunk Files                                        | Names                                     |  Raw Size
src_app_layout_person-layout_person-layout_module_ts.js | layout-person-layout-person-layout-module |  13.84 kB | 

Build at: 2024-02-20T15:25:45.056Z - Hash: 8ed1153ed4ccf7ce - Time: 27293ms

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


✔ Compiled successfully.

<--- Last few GCs --->

[838:0x5b04cf0]    32736 ms: Scavenge (reduce) 465.5 (475.8) -> 464.8 (476.1) MB, 0.50 / 0.00 ms  (average mu = 0.242, current mu = 0.129) task; 
[838:0x5b04cf0]    32743 ms: Scavenge (reduce) 465.8 (476.1) -> 464.9 (476.1) MB, 4.10 / 0.00 ms  (average mu = 0.242, current mu = 0.129) allocation failure; 
[838:0x5b04cf0]    32751 ms: Scavenge (reduce) 465.8 (476.1) -> 464.9 (476.1) MB, 5.71 / 0.00 ms  (average mu = 0.242, current mu = 0.129) allocation failure; 


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

 1: 0xca5430 node::Abort() [ng serve --port=4200 --host=0.0.0.0]
 2: 0xb7807d  [ng serve --port=4200 --host=0.0.0.0]
 3: 0xeca0b0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [ng serve --port=4200 --host=0.0.0.0]
 4: 0xeca397 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [ng serve --port=4200 --host=0.0.0.0]
 5: 0x10dc0e5  [ng serve --port=4200 --host=0.0.0.0]
 6: 0x10dc674 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [ng serve --port=4200 --host=0.0.0.0]
 7: 0x10f3564 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::internal::GarbageCollectionReason, char const*) [ng serve --port=4200 --host=0.0.0.0]
 8: 0x10f3d7c v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [ng serve --port=4200 --host=0.0.0.0]
 9: 0x10f4a9a v8::internal::Heap::FinalizeIncrementalMarkingIfComplete(v8::internal::GarbageCollectionReason) [ng serve --port=4200 --host=0.0.0.0]
10: 0x10f642a v8::internal::IncrementalMarkingJob::Task::RunInternal() [ng serve --port=4200 --host=0.0.0.0]
11: 0xd201a6  [ng serve --port=4200 --host=0.0.0.0]
12: 0xd22d5f node::PerIsolatePlatformData::FlushForegroundTasksInternal() [ng serve --port=4200 --host=0.0.0.0]
13: 0x188aa33  [ng serve --port=4200 --host=0.0.0.0]
14: 0x189f41b  [ng serve --port=4200 --host=0.0.0.0]
15: 0x188b757 uv_run [ng serve --port=4200 --host=0.0.0.0]
16: 0xbbbb83 node::SpinEventLoopInternal(node::Environment*) [ng serve --port=4200 --host=0.0.0.0]
17: 0xcf4d25  [ng serve --port=4200 --host=0.0.0.0]
18: 0xcf56ed node::NodeMainInstance::Run() [ng serve --port=4200 --host=0.0.0.0]
19: 0xc5f367 node::Start(int, char**) [ng serve --port=4200 --host=0.0.0.0]
20: 0x7fa5c335bd90  [/lib/x86_64-linux-gnu/libc.so.6]
21: 0x7fa5c335be40 __libc_start_main [/lib/x86_64-linux-gnu/libc.so.6]
22: 0xbb8d7e _start [ng serve --port=4200 --host=0.0.0.0]
Aborted (core dumped)

This error seems to be related to memory allocation issues, but I'm unsure how to address it.
Has anyone else encountered a similar problem while running Angular applications?
Any insights or suggestions on how to troubleshoot and resolve this issue would be greatly appreciated.