webpack ng serve runs out of memory

[slubowsky]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?) Windows 10
2. Versions. Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here: angular-cli: 1.0.0-beta.11-webpack.2 node: 6.3.1 os: win32 x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you do on your code? etc. Keep ng serve running and serving a cli built app while coding for some time (a few hours?)
4. The log given by the failure. Normally this include a stack trace and some more information.

...
 94% asset optimization
<--- Last few GCs --->

12936118 ms: Mark-sweep 1360.3 (1435.0) -> 1356.1 (1435.0) MB, 959.3 / 0 ms [all
ocation failure] [GC in old space requested].
12936973 ms: Mark-sweep 1356.1 (1435.0) -> 1356.0 (1435.0) MB, 854.9 / 0 ms [all
ocation failure] [GC in old space requested].
12938085 ms: Mark-sweep 1356.0 (1435.0) -> 1356.0 (1435.0) MB, 1112.2 / 0 ms [la
st resort gc].
12939012 ms: Mark-sweep 1356.0 (1435.0) -> 1355.8 (1435.0) MB, 926.7 / 0 ms [las
t resort gc].

<--- JS stacktrace --->

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

Security context: 000001F1975C9E51 <JS Object>
    1: replace [native string.js:~129] [pc=0000018EE86B74E5] (this=000000EF14282
331 <String[61]: D:/it/node_modules/@angular/common/src/pipes/common_pipes.js>,
N=000000EF140824C9 <JS RegExp>,O=00000135F03D7F21 <String[10]: !(webpack)>)
    2: shorten [D:\it\node_modules\webpack\lib\RequestShortener.js:~41] [pc=000
0018EE4290DA2] (this=0000020E88D58019 <a RequestShortener with map 00000313C3C4.
..

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memo
ry

1. Mention any other details that might be useful.

Only happened once so far but thought it worth mentioning

---

Thanks! We'll be in touch soon.

[iwoogy]

CLI is working well so far, I would build on a separate machine with more RAM for now.

[naveedahmed1]

Ok, I was able to compile with ng build --aot --prod

@mithun-daa and @iwoogy can you please try this on Windows machine.

In node_modules.bin folder modify the below files and replace contents with the following:

Modify ng.cmd

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

Modify ngc.cmd

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

PS: In some cases you should be able to compile even without modifying ngc.cmd.

Restart machine and then in command prompt move to yourproject\node_modules.bin> directory and run below command:

ng build --aot --prod

[iwoogy]

Sorry guys, I don't have a Windows Machine.

[naveedahmed1]

One observation though I was able to compile with --prod --aot, the generated output files are quite large for example one the files 0.f3869100b45355cbf408.chunk.js is 8.7Mb and compilation took about 20 minutes.

[iwoogy]

@kylecordes I have some new informations that may help.

I was using angular cli version beta.15. ng serve with 4Gb of RAM was enough to run it.

I've just updated to version beta.20-4 and now I have to allocate 12Gb of RAM to avoid the out of memory problem.

[kylecordes]

This is very good additional information, the CLI developers can see from this that the problem with this area is not only an old problem still needing attention eventually, it has worsened with recent betas.

[iwoogy]

Some more context that might help.

I needed to upgrade angular-cli because I had to use lazy loading.

I'm wondering if the lazy loading feature is not the cause of the extra memory consumption.

[mithun-daa]

@iwoogy How did you allocated the RAM? Using max-old-space-size? I have a beefy Windows machine with 20GB of RAM and I still run out of memory.

[naveedahmed1]

@mithun-daa have you tried https://github.com/angular/angular-cli/issues/1652#issuecomment-261269197 ?

[iwoogy]

My machine is 16GB of RAM, I think it swaps.

I have upgraded to version beta.18 now.

I have to use : node --max_old_space_size=12288 ./node_modules/.bin/ng serve

[filipesilva]

I'm changing the tag because it has an unfortunate name. It's not that I consider that not getting segfaults a nice to have, it's just that the required tag mostly signals it should be there for final and we didn't have this well pinned down.

[hansl]

I don't think this is an actual issue that we can fix. We could take less memory and have some plans to have multiple processes in 2.0 which will alleviate this, but for now the workaround has to work.

[aclowkey]

Hi guys,

I tried #issuecomment-261269197. I'm still getting the error. My app is reltively small - I have only 5 components..

As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release, which will only support Node 6.9 and greater. This package will be officially deprecated shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".

fallbackLoader option has been deprecated - replace with "fallback" loader option has been deprecated - replace with "use" fallbackLoader option has been deprecated - replace with "fallback" loader option has been deprecated - replace with "use" fallbackLoader option has been deprecated - replace with "fallback" loader option has been deprecated - replace with "use" fallbackLoader option has been deprecated - replace with "fallback" loader option has been deprecated - replace with "use" 10% building modules 3/3 modules 0 active <--- Last few GCs --->

66058 ms: Mark-sweep 1351.3 (1438.1) -> 1351.0 (1438.1) MB, 1629.4 / 0.0 ms [allocation failure] [GC in old space requested]. 68157 ms: Mark-sweep 1351.0 (1438.1) -> 1351.0 (1438.1) MB, 2098.3 / 0.0 ms [allocation failure] [GC in old space requested]. 70021 ms: Mark-sweep 1351.0 (1438.1) -> 1355.0 (1422.1) MB, 1863.7 / 0.0 ms [last resort gc]. 71534 ms: Mark-sweep 1355.0 (1422.1) -> 1359.4 (1422.1) MB, 1512.5 / 0.0 ms [last resort gc].

<--- JS stacktrace --->

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

Security context: 0000018AA36CFB61 1: parseDelimitedList [C:\demo-projects\ui\project-ui\project\node_modules\typescript\lib\typescript.js:~9899] [pc=000002D1F0C2D288] (this=0000018AA36E6659 ,kind=8,parseElement=0000015E5BCE6111 <JS Function parseVariableDeclaration (SharedFunctionInfo 0000030DC6C7CE69)>,considerSemicolonAsDelimiter=0000018AA3604381 ) 2: arguments adaptor frame: 2->3 3: p...

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

[jd-carroll]

@naveedahmed1 Can you please update your comment to have the following code:

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

This is necessary after the recent v1 release of the cli.

[naveedahmed1]

@jd-carroll in my case with Angular CLI V 1, I had to update max_old_space_size to 8048, so I believe the value would vary depending on the size of project.

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

[marcalj]

For Mac or Linux users try with this command:

node --max_old_space_size=8192 ./node_modules/.bin/ng build --aot
node --max_old_space_size=8192 ./node_modules/.bin/ng serve --aot
etc...

[evanjmg]

I'm running into this issue as well because I have a large application. With @ngtools/webpack, any solutions for circleCI?

[nadhir-falta]

Getting the same issue running ng test Ram: 16GB, Windows 10 @angular/cli: 1.0.0

[basherr]

Any work around?

92% chunk asset optimization
<--- Last few GCs --->

  674737 ms: Mark-sweep 1338.4 (1438.0) -> 1338.1 (1438.0) MB, 1596.8 / 0.0 ms [allocation failure] [GC in old space reque
sted].
  676388 ms: Mark-sweep 1338.1 (1438.0) -> 1338.0 (1438.0) MB, 1650.8 / 0.0 ms [allocation failure] [GC in old space reque
sted].
  678066 ms: Mark-sweep 1338.0 (1438.0) -> 1340.9 (1412.0) MB, 1677.2 / 0.0 ms [last resort gc].
  679724 ms: Mark-sweep 1340.9 (1412.0) -> 1343.8 (1412.0) MB, 1657.5 / 0.0 ms [last resort gc].

<--- JS stacktrace --->
==== JS stack trace =========================================

Security context: 000002899B5CFB61 <JS Object>
    1: has [000002899B504381 <undefined>:~300] [pc=000002D9C2896774] (this=000000A98FDDC099 <a Dictionary with map 0000001
427C0F679>,key=000001B9F1EB5831 <String[23]: SettingsModuleNgFactory>)
    2: def_variable [000002899B504381 <undefined>:3426] [pc=000002D9C2890753] (this=000001B9F1EAA2E9 <an AST_Function with
 map 0000001427C0A9D1>,symbol=000001B9F1EB58D1 <an AST_SymbolVar with map 000003...

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

github.com/AlDanial/cloc v 1.72  T=22.81 s (25.7 files/s, 6684.2 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
JavaScript                     130          14249          12816          64528
CSS                               59            2434            343             22303
TypeScript                   287            2662           4792          19021
HTML                           109           138              509             8659
JSON                             1              0                 0                21
PHP                              1              0                 0                 1
-------------------------------------------------------------------------------
SUM:                           587          19483          18460         114533
-------------------------------------------------------------------------------

[basherr]

I resolved by navigating to project/node_modules folder and run the following command: node --max_old_space_size=5048 "%~dp0\..\@angular\cli\bin\ng" build --aot --prod

[uredkar]

ng serve gives the following error to me. Basically stuck not sure what the next step is.

NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 10% building modules 4/4 modules 0 active <--- Last few GCs --->

155250 ms: Mark-sweep 1476.8 (1404.2) -> 1476.8 (1404.2) MB, 1379.6 / 0.0 ms [allocation failure] [GC in old space requested]. 156704 ms: Mark-sweep 1476.8 (1404.2) -> 1476.8 (1404.2) MB, 1453.6 / 0.0 ms [allocation failure] [GC in old space requested]. 158396 ms: Mark-sweep 1476.8 (1404.2) -> 1484.2 (1403.2) MB, 1690.8 / 0.0 ms [last resort gc]. 159861 ms: Mark-sweep 1484.2 (1403.2) -> 1491.7 (1403.2) MB, 1465.7 / 0.0 ms [last resort gc].

<--- JS stacktrace --->

[sebelga]

thanks @basherr !! this line saved my day :+1:

[MatellioRahul]

for windows machine you can try this node --max_old_space_size=5120 "node_modules\@angular\cli\bin\ng" b --prod where 5120 is the amount in mb you want to dedicate for the ng cli...

[vjayanth]

@hansl @kylecordes I used node --max_old_space_size=2048 ./node_modules/.bin/ng build --prod cmd and it generated the files of 10mb main.js and 6 mb of vendor.js . how to decrease the size of this files now ?

[xnnkmd]

@hansl This is a big problem and it remains unsolved - why is this closed ? P.S. Are google using angular cli for projects? If so, I can't understand why google is not getting this error. It occurs for pretty much all big projects.

[gtarun]

Facing the similar issue with ng build, I tried follwowing command as well but returned hell lot of errors. MacOs Sierra (256 SSD, 10 GB Ram)

node --max_old_space_size=7200 ./node_modules/.bin/ng build --prod --env=production --aot --output-hashing none--no-sourcemap

Please help guys it ruining our project deployment

[danishin]

Facing this issue as well. I gave it all of my 16GB memory of macbook pro.

It still failed with out-of-memory error. Not sure how to proceed from here... My project isn't even that big. About 1 year old. I'm not sure how the rest of big companies using Angular deal with this?

[xnnkmd]

@danishin could be a memory leak bug in angular- did you try to uncomment code using various kinds of angular features to find out what provokes the issue?

[danishin]

@xnnkmd Hmm that could actually be the reason. Otherwise, out-of-memory error with 16GB for midsized project is too suspicious.

Do you have, by any chance, any list of angular features that might be a cause of memory leak? Afaik my project doesn't seem to do anything too outrageous wrt using angular features

[tariknz]

It seems like if there is a template error then this could happen. Usually if you pass an arg to a function that doesn't have any args.

Adding enough memory will get you something like this: TS2554: Expected 0 arguments, but got 1.

But yeah I suspect the error is could be causing a memory leak somewhere? I'm not quite sure.

[sonirahul]

i have noticed the memory consumption decreases if typescript code is optimised - like removing unused imports, unused methods, unused variables. also i noticed variables should be declared as "let" or "const" not var.. and last but not the least using tslint plugin i removed most of the code issues and my angular build memory consumption came down from 4gb to 2 gb. Earlier my angular build was failing with 3gb and a minimum 4gb was required to build the prj but after doing the process mentioned above it started building with 2gb ram. Forgot to mention - i am using idea intellij ultimate which shows many such issues in the angular code.

[xnnkmd]

@danishin Sorry no - but you could start deleting more non-trival stuff like templates with pipes, ng-content etc, - just delete and delete until it builds and than put things back in until you find out what is responsible

[xnnkmd]

@danishin BTW: How big is your mid-sized project measured in #components, #files, #source-code-lines ?

[danishin]

@xnnkmd It's about 10K LOC of .ts files. Not a big project at all. I realized that in tsconfig.json, module is set to commonjs instead of es2015 as explained in here.

Will try after making the changes. I have a feeling that what @tariknz said https://github.com/angular/angular-cli/issues/1652#issuecomment-315955861 is the root cause of this. It seems that during the compilation, there was an error and memory leak because of it.

[brunobertechini]

Just as a heads up. It turns out when I use YARN instead of NPM to RESTORE packages ng build completes successfully.

I am using

ng build --env=prod --aot

When I restore packages using npm install -- same error from this issue (out of memory) When I restore packages using yarn install -- no error - success

[RicTheThird]

Thanks @basherr! But instead of running script from command line. Try running build script in package json by the following script:

"scripts": {
   "build-prod": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod"
}

then run "npm run build-prod"

[chronicbint]

@RicTheThird and @basherr - worked for me, thanks.

[scharlo]

@RicTheThird - thx. works for me. o/

By the way, i preferred changing the start script rather than adding a new one.

[deepakanuraags]

"scripts": { "ng-custom-serve": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng serve" } as suggested by @RicTheThird this is what i have done to resolve,having ng serve as well,but will this hold good?,what if the application grows?Can we hope on this and go ahead?Any help would be great?

[igorrius]

In my case problem was solved after force adding @ngtools/webpack package to dependencies. And using --max_old_space_size is was not required.

[muhammadsaaeed]

I've tried building project with latest webpack till date(i.e. @3.8.1) and it solved the similar issue for me.

[finalxcode]

npm uninstall -g @angular/cli and reinstall @angular/cli@1.2.6 solved my problem

[rejayi-experion]

I had experienced the issue FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memorywith 'ng build --prod'. I have solved the problem by using node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod

You can add also in package.json as

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

npm run prod

[MartinFreire]

Hi, in my case, none of the solutions above worked for me. I commented here about my execution crashing when it goes above 500 mb I leave you here the link in case that thread is useful to someone

[nhustak]

Thanks @rejayi-experion Modifying NG.cmd didn't work but just invoking it manually as you suggested did.

[ghost]

I mean, is there a reasonable explanation why it takes minutes to compile HTML, TS, and (S)CSS?

[JBGoldberg]

Anyone have a more definitive solution for this? Anyone comment that @TheLarkInn is working in the issue. There is another thread open to this issue?

[isahyarima]

node --max_old_space_size=2048 ./node_modules/.bin/ng Worked for me thanks

[thecheeto]

For anyone that might be trying to debug why all of a sudden the build process started running out of memory, I was able to track the issue down to the following code in my project.

Before change (out of memory exception):

  handleResponse(response: Response) {
    if (response.status == 403) {
      this.authenticationService.expireAuthToken();
      return Observable.throw('Session Timeout');
    }

    let json = response.json();

    return Observable.of({
      success: false,
      errors: json
    });
  }

After change (no memory issues):

  handleResponse(response: Response): Observable<any> { // <--- ADDED return type
    if (response.status == 403) {
      this.authenticationService.expireAuthToken();
      return Observable.throw('Session Timeout');
    }

    let json = response.json();

    return Observable.of({
      success: false,
      errors: json
    });
  }

Using the code of the before change, every time that method was called, it caused more and more memory being used during ng serve or ng build.

Not sure why specifying the return type fixes the issue, but went from ng build using ~3gb of memory down to ~700mb.

[vitor-belim]

@thecheeto Did you add this modification to every function within your project? And even if it returns void?