Angular4 JavaScript Memory overflow problem, angular4javascript

Angular4 JavaScript Memory overflow problem, angular4javascript

Recently, when I was writing a project based on angular4, When I was building -- prod, I was suddenly caught off guard with an error. The general error is as follows:

70% building modules 1345/1345 modules 0 active<--- Last few GCs --->ms: Mark-sweep 703.9 (837.9) -> 701.4 (811.9) MB, 331.3 / 0 ms [allocation failure] [GC in old space requested].ms: Mark-sweep 701.4 (811.9) -> 701.4 (790.9) MB, 350.5 / 0 ms [allocation failure] [GC in old space requested].ms: Mark-sweep 701.4 (790.9) -> 698.0 (760.9) MB, 433.7 / 0 ms [last resort gc].ms: Mark-sweep 698.0 (760.9) -> 692.7 (751.9) MB, 328.7 / 0 ms [last resort gc].<--- JS stacktrace --->==== JS stack trace =========================================Security context: 00000298510373A9 <JS Object>  1: /* anonymous */(aka /* anonymous */) [D:\dev\cobalt_wp\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:77] [pc=0000026F721B51D6] (this=0000029851004131 <undefined>,dep=00000150FC6162C9 <a NormalModule with map 0000025741730C01>)  2: arguments adaptor frame: 3->1  3: InnerArrayForEach(aka InnerArrayForEach) [native array.js:~924] [pc=0000026F71EE3DCD] (this=000002985100413...FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

Note: The code here is not my real error code. The compilation time is too long and I forgot to intercept it. The general error is basically the same. If you encounter the same problem, congratulations, you can find the answer!

At that time, I had a blind circle and had been compiling quite well. Why did it Suddenly overflow?

Possible causes include:

1. angular4 requires a large amount of CPU and memory during compilation. When there are many files, there may be insufficient memory (possibly );

2. When the code has a large amount of big data loops or endless loops (the sever stage does not overflow, this probability should not be large );

3. angular subscribed data is not destroyed in the ngOnDestroy phase, resulting in a large amount of data occupying memory (possibly)

I have not found the specific cause. Which of the following experts knows this? Please kindly advise. Thank you!

The process of solving this problem is twists and turns. You may not want to know it here. Let's talk about the solution below:

The core idea is to use the old attribute of the v8 engine: -- max_old_space_size to modify the memory online. As for where to set this attribute, It is a refined goblin!

Modify the Directory: my-project/node_modules/. bin find ng. cmd:

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

Modify the Directory: my-project/node_modules/. bin find ngc. cmd:

@IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\._@angular_compiler-cli@4.0.1@@angular\compiler-cli\src\main.js" %*) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:;.JS;=;% node --max_old_space_size=8192 "%~dp0\..\._@angular_compiler-cli@4.0.1@@angular\compiler-cli\src\main.js" %*)

Are you sure you have set -- max_old_space_size in it? As for the number, let's do it by yourself. My project is relatively large, and I set a bigger value to prevent unexpected problems. Haha!

Then execute ng build -- prod. Do you think that's all you need? This is the key!

I personally tested the settings above. Executing the compilation again will still report a memory overflow, and it seems that there is nothing to use! Switch the current directory to my-project/node_modules/. bin and then execute ng build -- prod. The world will be peaceful! My tests are valid. Thank you!

If you want to ask why -- aot is not added, leave it for your own consideration!

Now, I am free to share with you how to fill in this big pitfall. I hope it will be useful to you!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.