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.

score 11 · Accepted Answer · edited Apr 14 '21 at 01:22

11

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.

edited Apr 14 '21 at 01:22

Ramil Aliyev 007

4,437
2
31
47

answered Dec 15 '17 at 06:33

Vinod Kumar Ravuri

146
1
4

6

Tho this works, isn't it insane to require 8GB of memory? – Samantha Adrichem Jun 12 '20 at 06:10

score 8 · Answer 2 · answered Jun 17 '19 at 16:06

8

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

answered Jun 17 '19 at 16:06

adamdport

11,687
14
69
91

score 6 · Answer 3 · answered Apr 25 '17 at 07:32

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" %*
)

score 6 · Answer 4 · answered Jan 23 '21 at 04:33

6

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 .

answered Jan 23 '21 at 04:33

Harish Cholla

199
2
4

score 3 · Answer 5 · edited Feb 25 '20 at 13:42

3

Add this line to package.json file.

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

edited Feb 25 '20 at 13:42

Hoang Subin

6,610
6
37
56

answered Feb 25 '20 at 13:20

vahid khanmohamadi

31
2

https://upmostly.com/angular/fixing-angular-build-memory-issues - Check this – Jatin Dave May 16 '23 at 06:31

score 0 · Answer 6 · edited May 10 '21 at 23:56

0

Run the following command in terminal:

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

edited May 10 '21 at 23:56

Pang

9,564
146
81
122

answered Dec 02 '20 at 05:36

Bhavesh Lalwani

309
3
6

score 0 · Answer 7 · answered May 09 '21 at 11:29

0

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",**

answered May 09 '21 at 11:29

Code Spy

9,626
4
66
46

score 0 · Answer 8 · answered Jun 14 '21 at 23:46

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.

score 0 · Answer 9 · answered Jan 28 '22 at 10:10

0

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

answered Jan 28 '22 at 10:10

Dasylum

1

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](/help/how-to-answer). – Community Jan 28 '22 at 11:36

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

9 Answers9

For Angular SSR (server side rendering)

Linked