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

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.

node.jsangularwebpackleafletangular-cli


Solution 1:[1]

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

enter image description here

Solution 2:[2]

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 3:[3]

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 4:[4]

Add this line to package.json file.

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

Solution 5:[5]

Error faced while running "ng serve --open"

Source Link

Solution

In package.json "scripts" property update it to following

**"start": "node --max_old_space_size=2192 ./node_modules/@angular/cli/bin/ng serve",**

Solution 6:[6]

Run the following command in terminal:

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

Solution 7:[7]

For Angular SSR (server side rendering)

If you are trying to run ng run dev:ssr and getting memory errors, you can do this:

node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng run ANGULAR:serve-ssr -c development

Change ANGULAR to whatever your project is called in angular.json.

-c is the optional configuration you want to run.

Solution 8:[8]

In my case, I had to downgrade the node version to v12.14.1 and it works fine now!!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 adamdport
Solution 2 omeralper
Solution 3 Harish Cholla
Solution 4 Tran Son Hoang
Solution 5 Code Spy
Solution 6 Pang
Solution 7 Simon_Weaver
Solution 8 Dasylum

Related Questions