angular-cli: webpack ng serve runs out of memory

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”

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

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

I had experienced the issue FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory with ‘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

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...

this worked for me:

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

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

It’s weird that I have to tell Angular CLI/Node.js how much memory it can use.

Chrome/V8 seems happy to use all my memory.

OK, I made a way to test this. I enhanced the “angular 2 stress test” tool:

https://www.npmjs.com/package/angular2-stress-test

To stress test “ng serve”:

• install angular2-stress-test
• ng new test-project
• cd test-project
• ng serve
• leave “serve” running, and make a second command window to work in
• cd src/app
• for i in seq 1 1000; do angular2-stress-test 500 -r ; sleep 5 ; done
• While that runs, keep an eye on RAM and CPU use the ng serve Node process

In my testing as above:

• Starting up the first time, ng serve uses 463MB of RAM
• After running for a little while, it was over 1000MB of RAM

This shows that ng serve keep using more RAM over time, as it keeps recompiling after each change. However, offhand I would guess that reducing this increase, is pretty far down the priority list of the CLI team!

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

“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?

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 —>

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.

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.

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

@naveedahmed1 That does not appear to be a particularly large application, I’m surprised at the size that it is bumping into RAM limitations in the build. It had been my impression the boundary was quite a lot further out. (Unless maybe some of those components/services/etc. have a remarkably large amount of code in them.)

@iwoogy Yours appears to be a quite large Angular project, that is more the size range I would expect to react the limits of the tools. I think at this point in the development of CLI, you might possibly need to pick up a more customized set of build tooling to work at that scale.

The key mystery is: why was one of these two projects was able to get so much larger before running into limitations? There might be a clue in there that could help the team fix the problem.

I would guess that adding max-old-space-size to the system environment variables would do it - on Windows that is.

@mithun-daa You can raise the heap size usingnode --max_old_space_size=2048 ./node_modules/.bin/ng build. We (and the webpack team) are aware of some memory problems and @TheLarkInn is the one looking into it.