Angular-cli 'JavaScript heap out of memory' on asset optimization

Question

I'm creating a leaflet map inside an Angular-cli project. Map tiles are stored locally in the 'assets' folder because it's a raster map. The problem is when I've many zoom levels of the map, I've more than 280 thousands images with approximate size of 1.1 GB and It will get bigger.

when I use ng serve here is the console output (it is stuck @ assets optimization):

** NG Live Development Server is running on http://localhost:4200. **
25234ms building modules
69ms sealing
0ms optimizing
0ms basic module optimization
96ms module optimization
1ms advanced module optimization
16ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
179ms module reviving
9ms module order optimization
4ms module id optimization
6ms chunk reviving
23ms chunk order optimization
36ms chunk id optimization
61ms hashing
1ms module assets processing
149ms chunk assets processing
4ms additional chunk assets processing
0ms recording
1ms additional asset processing
2693ms chunk asset optimization
 94% asset optimization
<--- Last few GCs --->

  119106 ms: Mark-sweep 1333.6 (1409.7) -> 1333.6 (1415.7) MB, 1402.0 / 2.1 ms [allocation failure] [GC in old space requested].
  120570 ms: Mark-sweep 1333.6 (1415.7) -> 1333.6 (1427.7) MB, 1464.2 / 2.2 ms [allocation failure] [GC in old space requested].
  122079 ms: Mark-sweep 1333.6 (1427.7) -> 1340.0 (1409.7) MB, 1508.1 / 2.5 ms [last resort gc].
  123749 ms: Mark-sweep 1340.0 (1409.7) -> 1346.3 (1409.7) MB, 1670.2 / 2.1 ms [last resort gc].


<--- JS stacktrace --->

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

Security context: 000001AA792CFB61 <JS Object>
    1: inflight [C:\Workspace\node_modules\inflight\inflight.js:~7] [pc=00000202BF9894B7] (this=000001AA792E6661 <JS Global Object>,key=00000045863E5881 <Strin
g[90]\: lstat\x00C:/Workspace/src/assets/leafletmap_files/9/42/176.png>,cb=00000045863E5839 <JS Function lstatcb_ (SharedFunctionInfo 00000253E9EFC219
)>)
    2: wrapper [C:\Workspace\...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

I tried using: node --max_old_space_size=8192 --optimize_for_size --max_executable_size=4096 --stack_size=4096, but It doesn't make any difference.

1- Is there is any other way to avoid optimizing all the assets folder? If it is the source of the problem as I think, because the project were running smoothly before adding more leaflet tile images.

2- Is there are any workarounds to solve this issue?

UPDATE: There is an open issue at Angular-cli repository related to this question.

Solution 1

Add the below line to package.json file.

"aot": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --prod --aot"

and try running with npm run aot

It worked for me.

Solution 2

You can add NODE_OPTIONS as a system variable. To set memory to 4 gigs,

--max-old-space-size=4096

Lots more info on this thread, they deserve the votes

Solution 3

For those who get the same error, I solved the problem by changing global ng.cmd file.

C:\Users\userName\%AppData%\Roaming\npm

Copy/paste the following code into your ng.cmd.

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe" --max_old_space_size=8048 "%~dp0\node_modules\@angular\cli\bin\ng" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --max_old_space_size=8048 "%~dp0\node_modules\@angular\cli\bin\ng" %*
)

Solution 4

node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve

Open Terminal and add this above text in your terminal and click enter . that's it .

Solution 5

Add this line to package.json file.

"build": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod"

View more solutions

Comments

[Samantha Adrichem]

Tho this works, isn't it insane to require 8GB of memory?

[Admin]

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.