Angular-cli: CLI10: got a few compiler crashes today with "JavaScript heap out of memory"

Created on 26 Jun 2020 · 38Comments · Source: angular/angular-cli

🐞 Bug report

Command (mark with an `x`)

[ ] new
[ ] build
[x] serve
[ ] test
[ ] e2e
[ ] generate
[ ] add
[ ] update
[ ] lint
[ ] xi18n
[ ] run
[ ] config
[ ] help
[ ] version
[ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was Angular 9 with CLI 9.

Description

Small project freshly migrated from ng9 to 10, I sometimes get a compiler crash with "JavaScript heap out of memory" during ng serve.
It never happened to me before ng 10.

Project is available here:
https://github.com/ldex/Angular-Academy-202

🔥 Exception or Error


<--- Last few GCs --->

[1308:00000253CB798AB0] 11379648 ms: Scavenge 2033.1 (2051.3) -> 2032.1 (2051.3) MB, 5.4 / 0.0 ms  (average mu = 0.125, current mu = 0.067) allocation failure
[1308:00000253CB798AB0] 11379665 ms: Scavenge 2033.1 (2051.3) -> 2032.2 (2051.3) MB, 8.2 / 0.1 ms  (average mu = 0.125, current mu = 0.067) allocation failure
[1308:00000253CB798AB0] 11379824 ms: Scavenge 2033.5 (2051.6) -> 2032.6 (2051.6) MB, 5.4 / 0.0 ms  (average mu = 0.125, current mu = 0.067) allocation failure

<--- JS stacktrace --->

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

    0: ExitFrame [pc: 00007FF6513377DD]
    1: StubFrame [pc: 00007FF6513388D3]
Security context: 0x00c2be6408d1 
    2: formatLocation(aka formatLocation) [00000377970C75D1] [C:\Users\beep\Desktop\DemoApp\node_modules\webpack\lib\formatLocation.js:~41] [pc=000001471AADB4D8](this=0x012e6a0404b1 ,0x002fb6ac6cd1 
SourceLocation map = 00    3: /* anonymous */(aka /* anonymous */) [000003C749112FE1] [C

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF65072470F napi_wrap+113583
 2: 00007FF6506CF7D6 v8::base::CPU::has_sse+66646
 3: 00007FF6506D05D6 v8::base::CPU::has_sse+70230
 4: 00007FF650EE42EE v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF650ECC3C1 v8::SharedArrayBuffer::Externalize+833
 6: 00007FF650D9890C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436 7: 00007FF650DA3B40 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
 8: 00007FF650DA0664 v8::internal::Heap::PageFlagsAreConsistent+3204
 9: 00007FF650D95E63 v8::internal::Heap::CollectGarbage+1283
10: 00007FF650D944D4 v8::internal::Heap::AddRetainedMap+2452
11: 00007FF650DB56DD v8::internal::Factory::NewFillerObject+61
12: 00007FF650B1BF61 v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1665
13: 00007FF6513377DD v8::internal::SetupIsolateDelegate::SetupHeap+546637
14: 00007FF6513388D3 v8::internal::SetupIsolateDelegate::SetupHeap+550979
15: 000001471AADB4D8

🌍 Your Environment




Angular CLI: 10.0.0
Node: 12.18.0
OS: win32 x64

Angular: 10.0.0
... animations, cli, common, compiler, compiler-cli, core, forms     
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.0
@angular-devkit/build-angular     0.1000.0
@angular-devkit/build-optimizer   0.1000.0
@angular-devkit/build-webpack     0.1000.0
@angular-devkit/core              10.0.0
@angular-devkit/schematics        10.0.0
@ngtools/webpack                  10.0.0
@schematics/angular               10.0.0
@schematics/update                0.1000.0
rxjs                              6.5.5
typescript                        3.9.5
webpack                           4.43.0

Anything else relevant?

high investigation memorperformance bufix

Source

ldex

👍19

Most helpful comment

Quick update: We've identified the memory leak in Ivy compiler, and we're currently working on a fix. It'll be out in v10.0.2.

kyliau on 29 Jun 2020

🎉7 🚀6

All 38 comments

Same situation on my personal project which has been created in v10 (not upgrade from v9).

Angular CLI: 10.0.0
Node: 12.14.1
OS: darwin x64

Angular: 10.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.0
@angular-devkit/build-angular     0.1000.0
@angular-devkit/build-optimizer   0.1000.0
@angular-devkit/build-webpack     0.1000.0
@angular-devkit/core              10.0.0
@angular-devkit/schematics        10.0.0
@ngtools/webpack                  10.0.0
@schematics/angular               10.0.0
@schematics/update                0.1000.0
rxjs                              6.5.5
typescript                        3.9.5
webpack                           4.43.0

UPDATE

I've updated Node.js to v14 but it isn't be solved.

lacolaco on 26 Jun 2020

I can confirm that node.exe for @ngtools/webpack/src/type_checker_worker.js is growing roughly by a few MB on every single file save/recompile cycle. It went OOM for me after updating to Angular 10 within an hour or so... Its pretty annoying that ng serve crashes due to this every hour. I always wonder why my page still runs an old state until I notice that ng serve went away and the recompile/refresh never happened...

This can easily be reproduced by just saving a file without modifications in VSCode. ng serve will recompile and type_checker_worker grows. It does shrink again, but not by the amount it grew before.

I just hammered CTRL+S a few dozen times. After a while I see this:
WARNING in AngularCompilerPlugin: Forked Type Checker exited unexpectedly. Falling back to type checking on main thread.
A report JSON is generated (attached).

After that ng serve is super slow (factor 4) and starts to grow. Once it reaches the limit, it crashes and produces the second
attached report.

reports.zip

mduft on 26 Jun 2020

Most likely this is related to a regression in the compiler which was fixed via https://github.com/angular/angular/pull/37641 and will be available in 10.0.1

JFYI @alxhub

alan-agius4 on 26 Jun 2020

WA- https://dev.to/koscheyscrag/fix-of-angular-cli-javascript-heap-out-of-memory-error-while-running-ng-serve--1jjh

PPInfy on 26 Jun 2020

I was able to fix this by downgrading the @angular-devkit package(s) to version 0.803.26 inside package.json

"devDependencies": {
    "@angular-devkit/build-angular": "0.803.26",
    ...
}

(might need to delete or update package-lock.json file too, then update packages using npm install).

Any version above 0.803.26 keeps giving me the "JavaScript heap out of memory" error (on serve or build).

Tested on Angular 8 & 9.

AXeL-dev on 28 Jun 2020

👍3

It's still happening after upgrading to v10.0.1 but Its frequency is a little down on my environment. We still need more effective fixes.
cc/ @alan-agius4

lacolaco on 29 Jun 2020

👍2

The fix is due to come out in 10.1.x as per @alan-agius4 . So lets wait for it or use workarounds as pointed out by me or @AXeL-dev

PPInfy on 29 Jun 2020

@PPInfy, the fix is was referring too, is included in 10.0.1.

@lacolaco, we’ll still continue looking at other possible issues and resolutions.

Nb: using an older version of build-angular might cause undefined behaviour. Angular and Angular CLI version 10 needs @angular-devkit/build-angular version 0.1000.0 or later, using incompatible version is consider unsupported.

alan-agius4 on 29 Jun 2020

👍1

@alan-agius4 I thought since the issue is open and based on your comment this will come in release 10.1.0 to be precise.

PPInfy on 29 Jun 2020

👍1

@PPInfy, sorry I missed a 0 in my above comment. (Which I edited)

alan-agius4 on 29 Jun 2020

👍1

I'm getting this same error but while running "ng update @angular/core @angular/cli" on a very complex ng9 project. I am using @angular/compiler 10.0.1.

AlphaCreative-Mike on 29 Jun 2020

try running node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng serve

or
node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng build

PPInfy on 29 Jun 2020

👍1

@PPInfy - If that comment was directed at me, I updated my comment for clarify. I'm getting the error when running the update command, not 'after' on build like I originally said.

AlphaCreative-Mike on 29 Jun 2020

Try "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng update @angular/core @angular/cli"

PPInfy on 29 Jun 2020

Repro from https://github.com/angular/angular-cli/issues/18070

https://github.com/genielabs/HomeGenie/tree/master/src/homegenie-ui-app

//cc @genemars

alan-agius4 on 29 Jun 2020

@PPInfy - When I try that I get the following output:

Using package manager: 'npm'
Collecting installed dependencies...
Found 48 dependencies.
Package '-e' is not a dependency.

AlphaCreative-Mike on 29 Jun 2020

Quick update: We've identified the memory leak in Ivy compiler, and we're currently working on a fix. It'll be out in v10.0.2.

kyliau on 29 Jun 2020

🎉7 🚀6

v10.0.2 is out! I'll close this issue for now. Please open a new issue if you run into other memory issues.

kyliau on 30 Jun 2020

❤3

@kyliau - I am still getting the out of memory error but it is on the 'update' command instead of on build. Do you want me to create a new issue?

AlphaCreative-Mike on 30 Jun 2020

@AlphaCreative-Mike yes please create a new issue. It'll help us triage and prioritize the issue if you open a new one. Thank you!

kyliau on 30 Jun 2020

Still getting the exact same issue using 10.0.2:

$ ./node_modules/.bin/ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 10.0.0
Node: 14.4.0
OS: linux x64

Angular: 10.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1000.0
@angular-devkit/build-angular      0.1000.0
@angular-devkit/build-ng-packagr   0.1000.0
@angular-devkit/build-optimizer    0.1000.0
@angular-devkit/build-webpack      0.1000.0
@angular-devkit/core               10.0.0
@angular-devkit/schematics         10.0.0
@angular/cdk                       10.0.1
@angular/cli                       10.0.0
@ngtools/webpack                   10.0.0
@schematics/angular                10.0.0
@schematics/update                 0.1000.0
ng-packagr                         10.0.0
rxjs                               6.5.5
typescript                         3.9.5
webpack                            4.43.0

Using serve, after a couple of recompiles:

<--- Last few GCs --->

[18915:0x5936310]  3270672 ms: Scavenge 2014.4 (2060.9) -> 2002.6 (2060.9) MB, 4.4 / 0.0 ms  (average mu = 0.373, current mu = 0.366) allocation failure 
[18915:0x5936310]  3270717 ms: Scavenge 2017.0 (2060.9) -> 2005.3 (2062.1) MB, 4.7 / 0.0 ms  (average mu = 0.373, current mu = 0.366) allocation failure 
[18915:0x5936310]  3271845 ms: Scavenge 2019.7 (2062.6) -> 2007.9 (2037.6) MB, 36.6 / 0.0 ms  (average mu = 0.373, current mu = 0.366) allocation failure 


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa2b020 node::Abort() [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]
 2: 0x97a467 node::FatalError(char const*, char const*) [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]
 3: 0xb9e0ee v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]
 4: 0xb9e467 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]
 5: 0xd3e875  [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]
 6: 0xd3f21b v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]
 7: 0xd4d012 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]
 8: 0xd4de65 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]
 9: 0xd4f37f v8::internal::Heap::HandleGCRequest() [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]
10: 0xcfa457 v8::internal::StackGuard::HandleInterrupts() [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]
11: 0x104fe4a v8::internal::Runtime_StackGuardWithGap(int, unsigned long*, v8::internal::Isolate*) [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]
12: 0x13a9ed9  [/home/jakob/.nvm/versions/node/v14.4.0/bin/node]

cardamon on 1 Jul 2020

Same issue for me as well.
[972:000001705E494E80] 167385 ms: Scavenge 1330.4 (1424.2) -> 1329.6 (1424.7) MB, 6.3 / 0.0 ms (average mu = 0.149, current mu = 0.074) allocation failure
[972:000001705E494E80] 167396 ms: Scavenge 1330.6 (1424.7) -> 1329.9 (1425.2) MB, 5.3 / 0.0 ms (average mu = 0.149, current mu = 0.074) allocation failure
[972:000001705E494E80] 167407 ms: Scavenge 1330.9 (1425.2) -> 1330.2 (1425.7) MB, 4.6 / 0.0 ms (average mu = 0.149, current mu = 0.074) allocation failure

<--- JS stacktrace --->

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

0: ExitFrame [pc: 000001746E35C5C1]

Security context: 0x013eeb49e6e9
1: getArg [0000029075F0BD01] [D:\Project\Releases\Spike\Workspace\frontend\node_modules\webpack-sources\node_modules\source-map\lib\util.js:~18] pc=000001746F512690
...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF70F89DD8A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+4506
2: 00007FF70F878886 node::MakeCallback+4534
3: 00007FF70F879200 node_module_register+2032
4: 00007FF70FB930DE v8::internal::FatalProcessOutOfMemory+846
5: 00007FF70FB9300F v8::internal::FatalProcessOutOfMemory+639
6: 00007FF70FD79804 v8::internal::Heap::MaxHeapGrowingFactor+9620
7: 00007FF70FD707E6 v8::internal::ScavengeJob::operator=+24550
8: 00007FF70FD6EE3C v8::internal::ScavengeJob::operator=+17980
9: 00007FF70FD77B87 v8::internal::Heap::MaxHeapGrowingFactor+2327
10: 00007FF70FD77C06 v8::internal::Heap::MaxHeapGrowingFactor+2454
11: 00007FF70FEA1EA7 v8::internal::Factory::NewFillerObject+55
12: 00007FF70FF1F096 v8::internal::operator<<+73494
13: 000001746E35C5C1

PPInfy on 1 Jul 2020

For me the issue got solved by changing "target": "es6" from "target": "es5" in tsconfig.json. However I do have a question. Will this change work in IE11?. And can we do the change to es6? Will it break anything?

PPInfy on 1 Jul 2020

👍3

For anyone still seeing issues, it's probably caused by the same issue as reported in #18087. This is being addressed in #18089 that's expected to be in the next release, which should be released over the course of today.

For people using Yarn, you can add a "resolutions" block to force copy-webpack-plugin to 6.0.3 however this must then be removed when upgrading to the next release, as it could introduce compatibility issues in the future.

JoostK on 1 Jul 2020

👍1

does it change with target as es6? Because I tried many times switching between target es5 and es6 and everytime there is no build/server issue with target as es6 (tsconfig.json -> compilerOptions--> target).

PPInfy on 1 Jul 2020

Anyone else's team dead in the water until this releases?

mhov on 1 Jul 2020

Update worked fine for me, after the update the leak seems gone, processes are growing and shrinking again in a "normal" way I guess :) Only thing observed, incremental build times are way slower now - like 5 seconds instead of 1 second before...

mduft on 2 Jul 2020

@mduft are you using tsconfig.json -> compilerOptions--> target as ES6 ?

PPInfy on 2 Jul 2020

@PPInfy we have "target": "es2015", currently...

mduft on 2 Jul 2020

@mduft that is nothing but es6. with target es6/es2015 this is working touchwood. So again this seems like a compiler issuer rather than packager (not an issue with webpack or related modules it looks like) issue. Can someone here confirm this?

PPInfy on 2 Jul 2020

@alan-agius4 - Please test the fixes with target as es5. I think the root cause might be related to that.

PPInfy on 2 Jul 2020

@PPInfy, what’s the output of ng version?

alan-agius4 on 2 Jul 2020

For me it is:

     _                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 10.0.1
Node: 12.16.1
OS: win32 x64

Angular: 10.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.1
@angular-devkit/build-angular     0.1000.1
@angular-devkit/build-optimizer   0.1000.1
@angular-devkit/build-webpack     0.1000.1
@angular-devkit/core              10.0.1
@angular-devkit/schematics        10.0.1
@angular/cdk                      10.0.1
@angular/cli                      10.0.1
@angular/flex-layout              10.0.0-beta.32
@angular/material                 10.0.1
@ngtools/webpack                  10.0.1
@schematics/angular               10.0.1
@schematics/update                0.1000.1
rxjs                              6.6.0
typescript                        3.9.6
webpack                           4.43.0

Note the 10.0.1 versions of all the packages...

mduft on 2 Jul 2020

Update worked fine for me, after the update the leak seems gone, processes are growing and shrinking again in a "normal" way I guess :) Only thing observed, incremental build times are way slower now - like 5 seconds instead of 1 second before...

@mduft After which update did you see to start the incremental rebuild time regression? I am trying to figure out if it's due to a change in Angular framework or the CLI. Investigating this without a reproduction is practically impossible I'm afraid, so is it possible to share a reproduction?

JoostK on 2 Jul 2020

👍1

Angular CLI: 10.0.1
Node: 10.16.3
OS: win32 x64

Angular: 10.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace:

Package Version

@angular-devkit/architect 0.1000.1
@angular-devkit/build-angular 0.1000.1
@angular-devkit/build-ng-packagr 0.1000.1
@angular-devkit/build-optimizer 0.1000.1
@angular-devkit/build-webpack 0.1000.1
@angular-devkit/core 10.0.1
@angular-devkit/schematics 10.0.1
@angular/cdk 10.0.1
@angular/cli 10.0.1
@angular/flex-layout 10.0.0-beta.32
@angular/material 10.0.1
@ngtools/webpack 10.0.1
@schematics/angular 10.0.1
@schematics/update 0.1000.1
ng-packagr 10.0.0
rxjs 6.6.0
typescript 3.9.5
webpack 4.43.0

With this also same situation - OOM.

PPInfy on 2 Jul 2020

Again with Target ES6 it is working absolutely fine.

PPInfy on 2 Jul 2020

I thought it was easy to repro using this project - this commit has the update to 10.0.2 - however switching back to the commit before, it now also takes longer than usual :|

mduft on 2 Jul 2020

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