Reached heap limit Allocation failed - JavaScript heap out of memory

[dasshiba]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Previous version is angular v4

Description

We are migrating the cms product from angular v4 to angular v14. While trying to run the angular v14 application locally (command ng serve), we are getting the following error - "FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory".

We have tried to add more space as well by executing the command "node -max_old_space_size=8192./node_modules/@angular/cli/bin/ng serve". But still, the issue is not resolved.

The screenshot of the error is attached here for reference. It would be helpful if you can provide any suggestions to resolve this issue.

Minimal Reproduction

1. commands run : a. ng serve
   b. node -max_old_space_size=8192./node_modules/@angular/cli/bin/ng serve

2. packages : Here , I attached my package.json (package-json.txt file) and package-lock.json (package-lock-json.txt file)
   package-json.txt
   package-lock-json.txt

Exception or Error

No response

Your Environment

Angular CLI: 14.2.11
Node: 16.14.2
Package Manager: npm 8.5.0
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.11
@angular-devkit/build-angular   14.2.11
@angular-devkit/core            14.2.11
@angular-devkit/schematics      14.2.11
@angular/cli                    14.2.11
@angular/material               14.2.7
@schematics/angular             14.2.11
rxjs                            7.5.7
typescript                      4.7.4

Anything else relevant?

No response

[alan-agius4]

Hi @dasshiba, a lot has changed since version 14 including many performance and memory related problems. Can you try to update to the latest stable version to check if the problem persists?

If the problem persists after updating to version 161.x please provide memory heap snapshots.

[biswanathtcg]

@alan-agius4 I am from the same team where @dasshiba belong to. My query is if we are failing during ng build itself then how do we take heap snapshot? I am aware of process to take heap snapshot using chrome devtools but I believe I can do that while application is ng served and runs on browser.

Could you suggest or share any link to take heap snapshot during ng build?

[wartab]

Since the out of memory error happens with nodejs, the error is located in the node process, not in the browser. You need to provide a heap snapshot of Node.

https://nodejs.org/en/docs/guides/diagnostics/memory/using-heap-snapshot

[biswanathtcg]

@wartab @alan-agius4 But this link says "You can take a Heap Snapshot from your running application". The problem is we cannot even run the application because when we issue ng build command the node.exe process consumes memory infinitely. Below is a screenshot where it reached up to 10 GB .

How can we generate heap snapshot of this process at build stage?

[alan-agius4]

You don't need to run the application, you need to take a memory snapshot of the Angular CLI. You can use the below steps to create a snapshot.

1. node --inspect-brk node_modules/@angular/cli/lib/init.js server
2. Open Chrome and type chrome://inspect in the address bar
3. Click on the inspect button from one of your applications in the Remote Target section.
4. Go to Chrome DevTools > Memory
5. Take a heap snapshot
6. Perform the action that causes OOM

Repeat the last 2 until the OOM error is shown, once done, save the last couple of snapshots and send them over.

Angular 14 is also currently in LTS meaning that only security fixes are applied. Thus, please make sure that you update to the latest versions of Angular currently 16.1 before doing the above as there have been a number of performance improvements since version 14.

[biswanathtcg]

HeapSnapshot.zip

I have attached 3 heapsnapshot files. Please suggest what could be done on the application @alan-agius4 @wartab .

[alan-agius4]

From the memory snapshots it appears that the snapshots are not of a build. Infact the memory usage is of about 18mb. It also is not using the latest version of the Angular CLI.

Please update to the Angular CLI version 16 and if the problem persists please provided the requested snapshots.

[Tezra]

You don't need to run the application, you need to take a memory snapshot of the Angular CLI. You can use the below steps to create a snapshot.

1. node --inspect-brk node_modules/@angular/cli/lib/init.js server
2. Open Chrome and type chrome://inspect in the address bar
3. Click on the inspect button from one of your applications in the Remote Target section.
4. Go to Chrome DevTools > Memory
5. Take a heap snapshot
6. Perform the action that causes OOM

Repeat the last 2 until the OOM error is shown, once done, save the last couple of snapshots and send them over.

Angular 14 is also currently in LTS meaning that only security fixes are applied. Thus, please make sure that you update to the latest versions of Angular currently 16.1 before doing the above as there have been a number of performance improvements since version 14.

Trying to follow the steps provided for similar issue, but I think need more clarification on step 6. For me the action that is failing is ng test. I'm able to follow the steps up to 6 when I think I have a slight issue. Step 1 locks the terminal I run it in so I can't perform the action there, and running ng test in another terminal has a different process ID and seems to be running in a different node process. (So I'm only getting heap snapshots of an idle node). How do I invoke the ng command in the node instance from step 1?

[Tezra]

Oh, I can replace server with the cli command that is failing. I can't share this heap because I don't know if it contains any sensitive data. But it looks like the build processing is creating gigabytes worth of strings. If I use ng build or ng build --tsconfig , it's not becoming an issue. Something about ng test is generating 100 times more strings during the build phase then ng build does. I'll post heaps from a test project if I can reproduce it in another issue since I don't think my OOM issue is caused be the same thing. (something different is happening to cause webpack to start abusing strings liberally)

[alan-agius4]

Thanks for reporting this issue. Please update to the most recent version to see if the problem is resolved.

If the problem persists in your application after upgrading, please open a new issue a provided all the required information that is needed for us to reproduce the problem.

[Tesfay26]

Hello Everyone, I couldn't fix this error based your provided solution. And any update you have?
PS D:\Project\Learning curve\custor.ivsms\CUSTOR.IVSMS.Web> ng s
⠏ Generating browser application bundles (phase: sealing)...
<--- Last few GCs --->

[17852:09849568] 167526 ms: Mark-sweep 1004.8 (1045.0) -> 999.5 (1047.8) MB, 1388.0 / 0.0 ms (average mu = 0.366, current mu = 0.066) allocation failure; scavenge might not succeed
[17852:09849568] 169637 ms: Mark-sweep 1007.3 (1047.8) -> 1001.9 (1050.3) MB, 2083.7 / 0.0 ms (average mu = 0.168, current mu = 0.013) allocation failure; scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 00F7E937 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2439
PS D:\Project\Learning curve\custor.ivsms\CUSTOR.IVSMS.Web> ^C
PS D:\Project\Learning curve\custor.ivsms\CUSTOR.IVSMS.Web>Run npm audit for details.
PS D:\Project\Learning curve\custor.ivsms\CUSTOR.IVSMS.Web> ng s
⠏ Generating browser application bundles (phase: sealing)...
<--- Last few GCs --->

[17852:09849568] 167526 ms: Mark-sweep 1004.8 (1045.0) -> 999.5 (1047.8) MB, 1388.0 / 0.0 ms (average mu = 0.366, current mu = 0.066) allocation failure; scavenge might not succeed
[17852:09849568] 169637 ms: Mark-sweep 1007.3 (1047.8) -> 1001.9 (1050.3) MB, 2083.7 / 0.0 ms (average mu = 0.168, current mu = 0.013) allocation failure; scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 00F7E937 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2439

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}