ng build fail with 'JavaScript heap out of memory' with patch 6.0.3 #10897

ArnaudBarre · 2018-05-17T09:02:27Z

Versions

Angular CLI: 6.0.3
Node: 8.11.1
OS: darwin x64 (MacBook Pro 8Go RAM)
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, upgrade
 
Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cli                      6.0.3
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

Repro steps

ng build --prod

Observed behavior

92% chunk asset optimization UglifyJSPlugin
[.. waiting for long time]
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Desired behavior

Build works

Mention any other details that might be useful (optional)

Back to 6.0.1 and 0.6.1 like few days ago works. For the moment I didn't change the default memory allocate to node.

The text was updated successfully, but these errors were encountered:

MadeRelevant · 2018-05-17T09:27:45Z

I experience the same issue in some kind:

Angular CLI: 6.0.3
Node: 9.2.0
OS: linux x64
Angular: 6.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.1
@angular-devkit/build-angular      0.6.1
@angular-devkit/build-optimizer    0.6.1
@angular-devkit/core               0.6.3
@angular-devkit/schematics         0.6.3
@angular/cdk                       6.0.2
@angular/cli                       6.0.3
@angular/flex-layout               6.0.0-beta.15
@angular/material                  6.0.2
@angular/material-moment-adapter   6.0.2
@ngtools/webpack                   6.0.1
@schematics/angular                0.6.3
@schematics/update                 0.6.3
rxjs                               6.1.0
typescript                         2.7.2
webpack                            4.8.3

The command to build:

node --max_old_space_size=12000 ./node_modules/.bin/ng build --configuration=$ENV \
            --prod --source-map=$useSourceMaps \
            --i18nFile=src/locale/messages.$lang.xtb \
            --i18nFormat=xtb \
            --i18n-locale=$locale \
            --baseHref=/$lang/ \
            --outputPath=dist/$ENV/$lang \
            --deployUrl=$deployUrl/$lang

I assigned a lot of memory but it hangs at building 67%.. Also I saw using it up to 10GB of RAM when manually monitoring with htop.. This is not very accurate ofcourse but indicates a problem if you ask me.

This issue makes it impossible to deploy... Is there a downgrade guide back to angular 5 or did I end up in a new angular "adventure"?

clydin · 2018-05-17T12:17:20Z

Can you try with node v10? There are known nodeJS performance issues with Map/Set (used heavily within webpack internally) in versions higher than v8.9.4 and less then v10.

MadeRelevant · 2018-05-17T13:10:17Z

A part of my issue seems related to #9779
When I set extractCss to false within angular.json it continues but then gets stuck at UglifyJSPlugin...

Also installing v10 doesnt make a difference. Downgrading to angular 5 again.

It never ceases to amaze me that this javascript community produces a package that upgrades a dependency with a major version without bumping their own major version. Angular may be a nice project and well maintained and follow best practices like semversioning AND stick by the rules that come with the convention but depending on packages that dont follow these practices makes it just as unstable as any other average javascript package..

ArnaudBarre · 2018-05-18T07:58:24Z

After few tests I downgrade to 6.0.0 and set sourceMap to false. And in fact upgrading to node 10 helped, but I still see a 2x to 3x times increase in build time between 6.0.0 and 6.0.1.

th0r · 2018-05-23T14:42:07Z

Same issue here: after upgrading Angular from v5.2.8 to v6.0.3 production bundle (aot, unminified) build time/peak memory usage changed from 1.22gb / 54 seconds to 2.91gb / 114 seconds (+138% in memory usage and +111% of build time). I even had to add --max_old_space_size=8192 node flag because compilation process started failing with out of memory error.

Here is the package.json diff:

-    "@angular/animations": "5.2.8",
+    "@angular/animations": "6.0.3",
-    "@angular/common": "5.2.8",
+    "@angular/common": "6.0.3",
-    "@angular/compiler": "5.2.8",
+    "@angular/compiler": "6.0.3",
-    "@angular/compiler-cli": "5.2.8",
+    "@angular/compiler-cli": "6.0.3",
-    "@angular/core": "5.2.8",
+    "@angular/core": "6.0.3",
-    "@angular/forms": "5.2.8",
+    "@angular/forms": "6.0.3",
-    "@angular/http": "5.2.8",
+    "@angular/http": "6.0.3",
-    "@angular/platform-browser": "5.2.8",
+    "@angular/platform-browser": "6.0.3",
-    "@angular/platform-browser-dynamic": "5.2.8",
+    "@angular/platform-browser-dynamic": "6.0.3",
-    "@angular/router": "5.2.8",
+    "@angular/router": "6.0.3",
-    "@angular/upgrade": "5.2.8",
+    "@angular/upgrade": "6.0.3",
-    "@ngtools/webpack": "1.10.2",
+    "@ngtools/webpack": "6.0.3",
-    "ngx-infinite-scroll": "0.8.3",
+    "ngx-infinite-scroll": "6.0.0",
-    "rxjs": "5.5.6",
+    "rxjs": "6.2.0",
-    "typescript": "2.6.2",
+    "typescript": "2.7.2",
-    "@angular/cli": "1.7.4",
+    "@angular/cli": "6.0.3",
+    "@angular-devkit/build-angular": "0.6.3"

We're using custom webpack configuration with AngularCompilerPlugin from @ngtools/webpack.
Node version is 8.11.2.
Webpack version is 4.8.3.

clydin · 2018-05-23T14:51:06Z

@th0r Can you try with webpack 4.6?

th0r · 2018-05-23T14:52:40Z

@clydin same out of memory error with Webpack 4.6.
Notice that I used webpack 4.8.3 in both cases previously - it worked fine before Angular upgrade.

th0r · 2018-05-23T15:44:50Z

@clydin by the way I used Node v8.11.2. After upgrading to Node v10.1.0 results are 2.45gb / 53 seconds i.e. memory consumption is still very high (+101%) but build time became almost identical to what I had before.

clydin · 2018-05-23T15:48:46Z

@th0r That's good to hear at least the build time is better. Is that with webpack 4.6 or 4.8.3?

th0r · 2018-05-23T15:53:00Z

This is with webpack 4.8.3. Downgrading to 4.6.0 doesn't reduce memory consumption.

filipesilva · 2018-05-23T16:00:58Z

@th0r can you also try with Build Optimizer turned off in CLI 1.x versus 6.x please?

th0r · 2018-05-23T16:05:52Z

with Build Optimizer turned off

How can I turn if off?

clydin · 2018-05-23T16:09:15Z

If the webpack config uses this loader: @angular-devkit/build-optimizer/webpack-loader; then try removing it.

th0r · 2018-05-23T16:12:42Z

If the webpack config uses this loader: @angular-devkit/build-optimizer/webpack-loader; then try removing it.

Hmm, I didn't know it exists, so it wasn't turned on 😉

th0r · 2018-05-23T16:17:04Z

@clydin could you point to the line in @angular/cli webpack config that turns it on?

filipesilva · 2018-05-23T16:27:04Z

We do it here for general JS files https://github.com/angular/devkit/blob/0be99d3e3f5bc96ea57fd72b835ca83f95f4fe5f/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts#L162-L182

And here for application files https://github.com/angular/devkit/blob/0be99d3e3f5bc96ea57fd72b835ca83f95f4fe5f/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts#L98-L103

But it will only make it slower if you don't use it already. Makes for smaller bundles though.

filipesilva · 2018-05-23T16:29:26Z

Also, did I think the change might be unrelated to either Angular or ngtools/webpack. Probably only one of those is affecting things.

If you use the 1.x ngtools/webpack, do you get the lower memory usage?

th0r · 2018-05-23T17:07:02Z

If you use the 1.x ngtools/webpack, do you get the lower memory usage?

@filipesilva @ngtools/webpack v1.10.2: 2.58gb / 51 seconds

filipesilva · 2018-05-23T17:11:13Z

That's... odd.... so it sounds like the increased memory usage was due to updating Angular libraries (outside of Angular CLI)?

th0r · 2018-05-23T17:17:21Z

Here is the package.json diff: #10897 (comment)

th0r · 2018-05-23T17:20:12Z

Maybe it's somehow related to update of rxjs and it's new importing rules? Maybe it adds more work to webpack?

filipesilva · 2018-05-23T17:23:48Z

I wouldn't expect that, but maybe. I'll be doing some performance benchmarking soon and be sure to keep an eye out on the memory usage.

th0r · 2018-05-23T19:44:51Z

@filipesilva I've found an issue...but I don't have words...
That was because of updated lodash types...
After reverting them back from 4.14.109 to 4.14.70 memory usage went down to ~1.4gb and there is no "out of memory" error anymore.

I can't believe it! I didn't even include it in the diff I posted above because I thought it doesn't matter at all! WTF?!

My only assumption is that they added a few recursive types like PartialDeep that consume a lot of memory but I'm not sure about anything in this world anymore.

filipesilva · 2018-05-24T07:54:27Z

Well that's odd. But also interesting. Can you give me the lodash before and after versions? Maybe we can come up with a simple repro and pinpoint the problem. A lot of people might be suffering from this. Used lodash imports would also be useful.

th0r · 2018-05-24T07:59:15Z

You can find before/after versions in the comment above. We import the whole lodash and use quite a lot of it's methods including _.chain.

th0r · 2018-05-24T10:26:50Z

@filipesilva to summ up:

Node.js v10.1.0 with --max_old_space_size=8192 / webpack v4.8.3 / AoT build without minification:

@types/lodash v4.14.109 - 2.72gb / ~50 seconds
@types/lodash v4.14.70 - 1.62gb / ~50 seconds

Without max_old_space_size set:

@types/lodash v4.14.109 - out of memory error after ~20 minutes
@types/lodash v4.14.70 - 1.33gb / ~52 seconds

P.S. lodash v4.14.70 is not compatible with TS 2.7 out of the box - TS throws error node_modules/@types/lodash/index.d.ts(13154,53): error TS2344: Type 'T' does not satisfy the constraint 'object'. To fix it replace this line with isWeakSet<T extends object>(value?: any): value is WeakSet<T>;.

alexbjorlig · 2018-07-24T13:16:41Z

But what if you need source-maps in your prod build - what to do?

stefan-karlsson · 2018-07-24T18:23:09Z

@dauledk i would recommend to downgrade the cli to a version where build works.
And wait for a fix in a future release.

volodymyro-in6k · 2018-07-25T20:08:10Z

Hi @stefan-karlsson. Could you point what cli version is working for u.
Just now, I have downgraded it to the 6.0.1 and I still have issue.

ksavidetove · 2018-07-28T02:18:19Z

My solution was to explicitly specify in the tsconfig.ts sourcemap: false for the expected environment.
Even if it's supposed to be set at false by default.

filipesilva · 2019-01-29T14:25:41Z

Hi all,

Are you still seeing this with the latest versions? Does anyone have some up to date reproduction instructions that I can follow to see it too?

th0r · 2019-01-30T12:20:34Z

@filipesilva our project has grown a little and here are the latest results:

Angular CLI: 7.2.3
Node: 10.15.1
OS: darwin x64
Angular: 7.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router, upgrade

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.3
@angular-devkit/build-angular     0.12.3
@angular-devkit/build-optimizer   0.12.3
@angular-devkit/build-webpack     0.12.3
@angular-devkit/core              7.2.3
@angular-devkit/schematics        7.2.3
@angular/cdk                      7.3.0
@angular/cli                      7.2.3
@ngtools/webpack                  7.2.3
@schematics/angular               7.2.3
@schematics/update                0.12.3
rxjs                              6.4.0
typescript                        3.1.6
webpack                           4.29.0

Build (sourcemaps off, minimizer off):

max_old_space_size=8192: 1.45 mins / 3.57gb mem peak
no max_old_space_size: ~1 min / JavaScript heap out of memory error

So I can't see any progress here.

filipesilva · 2019-01-30T12:36:05Z

@th0r it is expected that at some point you need to increase the memory limit. That is not a bug. Larger projects will need more resources to build. Since NodeJS projects have a default memory limit, it will be reached at some point.

One can argue that the current memory usage is too high. I wouldn't say that 2 minutes to build a project for production is too long though. I wouldn't even say 2mins to build a large project for development is too long, as long as rebuilds are short.

I don't know the specifics of your project, but please bear in mind that it's not all just your source code. You might not have a huge amount of source TS files but still have a lot of code in imported libraries.

th0r · 2019-01-30T12:45:45Z

I wouldn't say that 2 minutes to build a project for production is too long though.

But it's not for production - both sourcemaps and minification are turned off. If I turn them on stats become 4.6 mins / ~5gb mem at peak.

I think 5gb of ram is a little bit too much.

djohns2021 · 2019-01-31T20:08:24Z

I noticed this as well after @types/lodash was added to our project. Cranked up the mem limit and haven't looked back. I'm interested to know if there's a better way or if turning up the mem is hte suggested solution.

kflo · 2019-02-15T14:06:49Z

bump

gnagakarthik · 2019-03-13T03:46:33Z

@filipesilva @th0r I have a similar issue, I am using angular cli build with tfs build pipeline.

I use ng build --prod and the encounter the FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory.

I know i have to increase the memory size, I am unsure how to do it. if i perform from cmd:
node --max_old_space_size=4096 ./node_modules/.bin/ng build --prod, node is not valid command for ng

How do i correctly set the max_old_space_size as a global value and use ng build --prod or execute npm run ?

using:
Angular 7.2.0
"@angular-devkit/build-angular": "~0.11.3"
Node v8.11.3

Tried updating node to v 10.15.3 but the build times are same.

th0r · 2019-03-13T07:35:59Z

@gnagakarthik I use custom build configuration instead of ng build so the command in package.json looks like this node --max_old_space_size=8192 ./node_modules/.bin/gulp compile-scripts and it works fine.

Seems like you can set it via NODE_OPTIONS env variable.

JohnnyDevNull · 2019-03-14T09:23:20Z

I run since a few day's also in this issue and done my workaround as follow:

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

node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve -c myenv
node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build -c myenv

It works actually fine for my usage with the default ng server/build process. I hope not to run in it soon again...

kalimulhaq · 2019-04-09T05:27:02Z

To git raid of this issue add this
"build:prod": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod"
line to your scripts section of package.json file. It will looks like

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

and now run
npm run build:prod

aijazkhan81 · 2019-04-13T13:35:32Z

Even after assigning 8gigs, my build still fails. Sourcemap is false as well. This didn't happen when I was on ng5, after ng7, it broke altogether. I cannot even run webpack stats to see what is taking up so much data..

bharat-banavalikar · 2019-04-24T05:25:01Z

Increase maximum memory allocated for budgets in angular.json

"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "11mb"
}
]

and used this command
node --max_old_space_size=10500 'node_modules/@angular/cli/bin/ng' build --prod

j3gb3rt · 2019-04-28T20:50:59Z

We are seeing this on dev builds as well. We used ionic to create or project and it uses architect. I am wondering if this has something to do with architect not managing memory correctly. Maybe file copies as we have a lot of assets that architect is copying.

Also, we were not seeing this issue under ng 5 before the migration to ng7

lppedd · 2019-07-03T14:35:40Z

Upgraded to Angular 8.1 from 7.2.15.
Immediately saw the issue, out-of-memory. Same configuration, but 8 builds for both ES2015 and ES5, I suppose this is the issue.

Solved by increasing the Node memory limit from the default 1.5GB to 2.0GB.
This might mean incurring in higher cost if you're on, e.g., AWS.

zehavibarak · 2019-08-15T02:14:04Z

I'm getting this message with cli 8.2.1:
allocation failure scavenge might not succeed...Very long string[7203]...typescript.js...FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory.

adding --max_old_space_size=8000 didn't help

"@angular-devkit/build-webpack": "^0.802.1",
"@angular-devkit/build-angular": "^0.802.1",
"@angular-devkit/build-ng-packagr": "^0.802.1",

thoughts?

filipesilva · 2019-08-15T18:23:52Z

We have been seeing memory problem on Angular CLI 8 and work has been tracked in #13734. I'll close this issue in favor of that one. Please check out the comments there, especially #13734 (comment).

angular-automatic-lock-bot · 2019-09-15T08:02:21Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

filipesilva added comp: cli/build freq2: medium severity4: memory/performance labels May 17, 2018

clydin mentioned this issue May 21, 2018

fix(@angular-devkit/build-angular): temporarily downgrade webpack to 4.6 angular/devkit#950

Merged

tarundhillon mentioned this issue Aug 19, 2018

Errors during prod build with --source-map #11941

Closed

ngbot bot added this to the needsTriage milestone Jan 24, 2019

filipesilva added type: bug/fix needs: more info Reporter must clarify the issue labels Jan 29, 2019

ngbot bot modified the milestones: needsTriage, Backlog Jan 29, 2019

Supamiu mentioned this issue Jul 3, 2019

feat(core): update to angular 8 ffxiv-teamcraft/ffxiv-teamcraft#1003

Closed

filipesilva closed this as completed Aug 15, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 15, 2019

ng build fail with 'JavaScript heap out of memory' with patch 6.0.3 #10897

ng build fail with 'JavaScript heap out of memory' with patch 6.0.3 #10897

Comments

ArnaudBarre commented May 17, 2018 • edited Loading

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

MadeRelevant commented May 17, 2018

clydin commented May 17, 2018

MadeRelevant commented May 17, 2018

ArnaudBarre commented May 18, 2018

th0r commented May 23, 2018 • edited Loading

clydin commented May 23, 2018

th0r commented May 23, 2018 • edited Loading

th0r commented May 23, 2018

clydin commented May 23, 2018

th0r commented May 23, 2018

filipesilva commented May 23, 2018

th0r commented May 23, 2018

clydin commented May 23, 2018

th0r commented May 23, 2018

th0r commented May 23, 2018

filipesilva commented May 23, 2018

filipesilva commented May 23, 2018

th0r commented May 23, 2018 • edited Loading

filipesilva commented May 23, 2018

th0r commented May 23, 2018

th0r commented May 23, 2018

filipesilva commented May 23, 2018

th0r commented May 23, 2018 • edited Loading

filipesilva commented May 24, 2018

th0r commented May 24, 2018 • edited Loading

th0r commented May 24, 2018 • edited Loading

alexbjorlig commented Jul 24, 2018

stefan-karlsson commented Jul 24, 2018

volodymyro-in6k commented Jul 25, 2018

ksavidetove commented Jul 28, 2018

filipesilva commented Jan 29, 2019

th0r commented Jan 30, 2019 • edited Loading

filipesilva commented Jan 30, 2019

th0r commented Jan 30, 2019

djohns2021 commented Jan 31, 2019

kflo commented Feb 15, 2019

gnagakarthik commented Mar 13, 2019 • edited Loading

th0r commented Mar 13, 2019 • edited Loading

JohnnyDevNull commented Mar 14, 2019 • edited Loading

kalimulhaq commented Apr 9, 2019 • edited Loading

aijazkhan81 commented Apr 13, 2019

bharat-banavalikar commented Apr 24, 2019 • edited Loading

j3gb3rt commented Apr 28, 2019

lppedd commented Jul 3, 2019 • edited Loading

zehavibarak commented Aug 15, 2019

filipesilva commented Aug 15, 2019

angular-automatic-lock-bot bot commented Sep 15, 2019

ArnaudBarre commented May 17, 2018 •

edited

Loading

th0r commented May 23, 2018 •

edited

Loading

th0r commented May 23, 2018 •

edited

Loading

th0r commented May 23, 2018 •

edited

Loading

th0r commented May 23, 2018 •

edited

Loading

th0r commented May 24, 2018 •

edited

Loading

th0r commented May 24, 2018 •

edited

Loading

th0r commented Jan 30, 2019 •

edited

Loading

gnagakarthik commented Mar 13, 2019 •

edited

Loading

th0r commented Mar 13, 2019 •

edited

Loading

JohnnyDevNull commented Mar 14, 2019 •

edited

Loading

kalimulhaq commented Apr 9, 2019 •

edited

Loading

bharat-banavalikar commented Apr 24, 2019 •

edited

Loading

lppedd commented Jul 3, 2019 •

edited

Loading