GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing github.com — serve crashes randomly after upgrading to Angular 12 · Issue #20801 · angular/angular-cli

serve crashes randomly after upgrading to Angular 12 #20801

New issue

Copy link

New issue

Copy link

Closed

serve crashes randomly after upgrading to Angular 12#20801

Copy link

Labels

needs: more infoReporter must clarify the issueReporter must clarify the issueseverity4: memory/performance

Description

glued

opened

on May 14, 2021

Issue body actions

🐞 Bug report

Command (mark with an `x`)

new
build
serve
test
e2e
generate
add
update
lint
extract-i18n
run
config
help
version
doc

Is this a regression?

yes, did not see this issue in Angular 10 or 11

Description

While running ng serve for a few hours it will randomly crash with an error. When I upgraded to angular 12, I also upgraded to node 14.17.0

A clear and concise description of the problem...

🔬 Minimal Reproduction

see above

🔥 Exception or Error



FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x1013024b5 node::Abort() (.cold.1) [/usr/local/bin/node]
 2: 0x1000b1919 node::Abort() [/usr/local/bin/node]
 3: 0x1000b1a7f node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 4: 0x1001f5bb7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0x1001f5b53 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 6: 0x1003a2ed5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 7: 0x1003a497a v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
 8: 0x1003a00a5 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 9: 0x10039d9d0 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
10: 0x1003ac0da v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x1003ac161 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
12: 0x1003753be v8::internal::FactoryBase::NewRawTwoByteString(int, v8::internal::AllocationType) [/usr/local/bin/node]
13: 0x10060bd5f v8::internal::String::SlowFlatten(v8::internal::Isolate*, v8::internal::Handle, v8::internal::AllocationType) [/usr/local/bin/node]
14: 0x10073b507 v8::internal::Runtime_StringCharCodeAt(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
15: 0x100a80639 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
16: 0x3f2f450ab47
17: 0x3f2f452f014
Abort trap: 6

🌍 Your Environment


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


Angular CLI: 12.0.0
Node: 14.17.0
Package Manager: npm 6.14.13
OS: darwin x64

Angular: 12.0.0
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@angular/cdk                    10.2.7
@angular/fire                   6.1.4
@angular/material               10.2.7
@schematics/angular             12.0.0
ng-packagr                      12.0.0
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

Reacted by Sylvain Dumont, oleksiy-ryabchuk, Niels Welsch, Elvis Nieves, Elvis Begovic, Denis, LanderBeeuwsaert, Andreas Gladik, Vlad Dumbrava, Lars Rye Jeppesen and 43 more

Activity

alan-agius4 commented on May 17, 2021
alan-agius4
on May 17, 2021
Collaborator
More actions
Hi @glued,

Can you kindly share your project (even privately) or heap snapshots?, Unfortunately, without any addition information we will not be able to look into this issue.
alan-agius4
added
needs: more infoReporter must clarify the issueReporter must clarify the issue
on May 17, 2021
alan-agius4 commented on May 17, 2021
alan-agius4
on May 17, 2021
Collaborator
More actions
Couple of questions to can further help us.

Are you using HMR?

Are you using named chunks?

anton-white commented on May 17, 2021

anton-white

on May 17, 2021

More actions

@alan-agius4, thanks for the direction.

But I do really feel the build time issue relates to this one and vice versa.

Here is the error ng serve fails randomly with:

⠴ Generating browser application bundles (phase: building)...
<--- Last few GCs --->

[58819:0x102d61000]  9811769 ms: Scavenge 2032.2 (2052.4) -> 2031.6 (2052.4) MB, 251.4 / 0.0 ms  (average mu = 0.221, current mu = 0.136) allocation failure 
[58819:0x102d61000]  9811787 ms: Scavenge 2032.4 (2052.4) -> 2031.7 (2052.4) MB, 14.4 / 0.0 ms  (average mu = 0.221, current mu = 0.136) allocation failure 
[58819:0x102d61000]  9812638 ms: Mark-sweep 2032.6 (2052.6) -> 2031.6 (2052.6) MB, 845.2 / 0.0 ms  (average mu = 0.243, current mu = 0.271) allocation failure scavenge might not succeed


<--- JS stacktrace --->

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

    0: ExitFrame [pc: 0x1009dcb79]
    1: StubFrame [pc: 0x100a46574]
Security context: 0x0ceb671008d1 <JSObject>
    2: /* anonymous */(aka /* anonymous */) [0xcebd79906d1] [.../node_modules/webpack/lib/NormalModuleFactory.js:1] [bytecode=0xceb9482b759 offset=0](this=0x0cebab9c04b1 <undefined>,0x0ceb3b432869 <Object map = 0xceb1a889859>,0x0ceb272e61b9 <JSFunction (sfi = 0xcebfec50c51)>)
    3: /* anonymo...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x1011d1c65 node::Abort() (.cold.1) [/usr/local/bin/node]
 2: 0x10009f919 node::Abort() [/usr/local/bin/node]
 3: 0x10009fa7f node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 4: 0x1001e3867 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0x1001e3807 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 6: 0x10036b995 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 7: 0x10036d20a v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
 8: 0x100369c3c v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 9: 0x100367a3e v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
10: 0x10037390a v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x100373991 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
12: 0x10034135a v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node]
13: 0x100693768 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
14: 0x1009dcb79 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
15: 0x100a46574 Builtins_CreateFunctionContextHandler [/usr/local/bin/node]
16: 0x100962524 Builtins_InterpreterEntryTrampoline [/usr/local/bin/node]
17: 0x100962524 Builtins_InterpreterEntryTrampoline [/usr/local/bin/node]
error Command failed with signal "SIGABRT".

anton-white commented on May 17, 2021
anton-white
on May 17, 2021
More actions
Also I just tried to compare the memory size allocated for v11 and for v12 ng serve.

v11 gets ~600 Mb of memory and doesn't get increased on each rebuild.

v12 starts with almost 1.5 Gb and increases each time rebuild happens.

I guess when the memory allocation hits some limit the error occurs.
alan-agius4 commented on May 17, 2021
alan-agius4
on May 17, 2021
Collaborator
More actions

Also I just tried to compare the memory size allocated for v11 and for v12 ng serve.

v11 gets ~600 Mb of memory and doesn't get increased on each rebuild.

v12 starts with almost 1.5 Gb and increases each time rebuild happens.

I guess when the memory allocation hits some limit the error occurs.

Can you try to use NG_BUILD_CACHE=0 environment variable to disable Webpacks' caching?

anton-white commented on May 17, 2021

anton-white

on May 17, 2021

More actions

v12 versioning:

Angular CLI: 12.0.0
Node: 12.18.3
Package Manager: yarn 1.22.5
OS: darwin x64

Angular: 12.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@angular/flex-layout            11.0.0-beta.33
@schematics/angular             12.0.0
rxjs                            6.6.7
typescript                      4.2.4

v11 versioning:

Angular CLI: 11.2.11
Node: 12.18.3
OS: darwin x64

Angular: 11.2.12
... 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.1102.11
@angular-devkit/build-angular   0.1102.11
@angular-devkit/core            11.2.11
@angular-devkit/schematics      8.3.23
@angular/cdk                    11.2.11
@angular/cli                    11.2.11
@angular/material               11.2.11
@schematics/angular             11.2.11
@schematics/update              0.1102.11
rxjs                            6.6.3
typescript                      4.0.5

anton-white commented on May 17, 2021
anton-white
on May 17, 2021
More actions

Can you try to use NG_BUILD_CACHE=0 environment variable to disable Webpacks' caching?

Tried that.
It started with slightly less memory of around 1.25 Gb but grew up quickly after few rebuilds to 1.6 Gb
sha-N commented on May 17, 2021
sha-N
on May 17, 2021
More actions
@anton-white yes I can attest to that, same happened to me, compiler is randomly exceeding the memory usage than default max of NodeJs. My temp fix was to increase the max memory for node. But still it is taking a long time for compilation.

@alan-agius4 it is same situation when named chunk is true or false in the config.

Memory usage is around 4-5GB.
sha-N commented on May 17, 2021
sha-N
on May 17, 2021
More actions
@anton-white are you using angular material theming?

for me compile time issue was because of the following lines

@use '~@angular/material' as mat; @import "~@angular/material/theming";

ng update added the @use but kept second line. After removing that (angular/components#22676 (comment)) compile time has improved by a lot. memory usage is still high.
Reacted by Sylvain Dumont, Michael Prentice, Denis and Logan Rizzo
anton-white commented on May 17, 2021
anton-white
on May 17, 2021
More actions
@sha-N
yes, Angular Material is being used.
But I don't have the redundant @import line.
Had to rollback to v11 for now.
alan-agius4
added
severity4: memory/performance
on May 17, 2021
glued commented on May 17, 2021
glued
on May 17, 2021
Author
More actions
Are you using HMR?

NO

Are you using named chunks?

YES ( in dev env )
alan-agius4 commented on May 18, 2021
alan-agius4
on May 18, 2021
Collaborator
More actions
I spent some times looking into a project that does show OOM issues during rebuilds. The project in question was provided by @ganySA privately. (Thanks a lot for this).

What I found out from my investigation on the mentioned project is;

A non incremental build uses around ~1.7/1.8Gb of memory

After the first rebuild this increases to ~1.9/2Gb and keep in this range after multiple rebuilds

Disabling Webpack 5 memory caching does keep the memory usage consistent between the first and second build

The OOM happens when a re-build is triggered before GC kicks in a frees up the memory

Reverting the project to Webpack 4 used the same amount of memory that Webpack 5 uses when caching is disabled

To sum it up, from the project I look at, it doesn't appear that there is a memory leak as memory usage stays within the same range over a number of rebuilds but rather the increase in memory usage is to be attributed to Webpack 5 caching.

Note: there are number of options such as outputHashing being enabled and namedChunks being disabled can contribute to a memory leak when used in watch mode.

That said, without a reproduction even shared privately or memory snapshots, we will not be able to determine if there is a memory leak, or it's just the expected increase of memory usage due to Webpack 5 caching, in the upcoming release we also shifted SASS to be processed in workers which should help reduce memory pressure on the main thread since workers have a dedicated memory pool.
Reacted by Shan M, Toni Villena and Logan Rizzo
amitagt007 commented on May 19, 2021
amitagt007
on May 19, 2021
More actions
while upgrading from angular 11 to 12, the in the angular .json file, the aot flag updated to false, with this value ng serve is working perfectly but while running ng test command its thworing the "Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory". If only one test file is run , then it succeeds -> any help to fix this up?
86 remaining items
rppig42 commented on Jan 25, 2022
rppig42
on Jan 25, 2022
More actions
Upgraded from 11.1.2 to 13.1.1 and this issue emerges.

I can reproduce this issue every time when I use a second terminal to run ng build
Akxe commented on Feb 1, 2022
Akxe
on Feb 1, 2022
More actions
Sadly this is not an issue with Angular, but with Webpack: webpack/webpack#12771

I used to crash after every change, but after minifying (any simplifying) JSON files from 500Mb to 50Mb, the crashes are gone. So my suggestion is to look for large imported files and try not to import them if possible.
Reacted by Juan Martin
SDAdham commented on Feb 5, 2022
SDAdham
on Feb 5, 2022
More actions
I don't have large files in angular. It just consumes up to 2.9 gb and during build, it'd go up to 3.5 gb. I have zero idea why whould serve take that much space. The project is huge and this was pain but nothing is clear about whys here.

I had to ditch Ng serve completely and use Ng build with nodemon and angular 13. Since angular 13 caches build. This helped as a workaround with a great difference. Now angular consumes 50mb runtime and 1 gb during build.

I still wonder why build would go that much high. It's just frontend. Nestjs (backend) does tons better job than angular in this.
Reacted by Juan Martin
SDAdham commented on Feb 5, 2022
SDAdham
on Feb 5, 2022
More actions
Also since ditching Ng serve. It's much more stable for me. No more weird unexplained port drops or simply the serve stops for unknown reason. It's just stable for me
pmoleri commented on Feb 7, 2022
pmoleri
on Feb 7, 2022
More actions
@SDAdham @Akxe I had this issue in early v12 versions, but it's been working fine in both 12.2.3 and 13.1.3.
Have you checked out my previous comment?
If you migrated from a previous version (e.g. v11) your development config might be messed up. You should check all the values and how they merge with the default config.
SDAdham commented on Feb 8, 2022
SDAdham
on Feb 8, 2022
More actions
@pmoleri , I've got everything you mentioned in there, except sadly only "aot": true is not enabled for dynamic html rendering
Reacted by Pablo Moleri
barnabasbartha commented on Apr 2, 2022
barnabasbartha
on Apr 2, 2022
More actions
Any update on this? 👀
JoostK commented on Apr 2, 2022
JoostK
on Apr 2, 2022
Member
More actions

Any update on this? 👀

Unfortunately without a reproduction this isn't really actionable.
Akxe commented on Apr 2, 2022
Akxe
on Apr 2, 2022
More actions
@JoostK Build an app with 100Mb JSON file, it will do the job, at least does for me. I know that because removing these from the build did remove the error.
JoostK commented on Apr 2, 2022
JoostK
on Apr 2, 2022
Member
More actions
@Akxe can you prepare a repo?
Akxe commented on Apr 2, 2022
Akxe
on Apr 2, 2022
More actions
@JoostK Not anymore actually, sorry
alan-agius4 commented on Jun 3, 2022
alan-agius4
on Jun 3, 2022
Collaborator
More actions
The issue has been open for some time and a lot has changed since then. While there were several people reporting and commenting on this issue. A reproduction was not provided that demonstrates / suggests that there is a memory leak.

If you are still experiencing this issue please open a new issue and provide all necessary information including a minimal reproduction or at the very minimum memory snapshots.
alan-agius4
closed this as completed on Jun 3, 2022
angular-automatic-lock-bot commented on Jul 4, 2022
angular-automatic-lock-botBot
on Jul 4, 2022
More actions
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.}
angular-automatic-lock-bot
locked and limited conversation to collaborators on Jul 4, 2022

Metadata

Assignees

No one assigned

Labels

needs: more infoReporter must clarify the issueReporter must clarify the issueseverity4: memory/performance

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.

GeezerVison

serve crashes randomly after upgrading to Angular 12 #20801

Description

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

Activity

alan-agius4 commented on May 17, 2021

alan-agius4 commented on May 17, 2021

anton-white commented on May 17, 2021

anton-white commented on May 17, 2021

alan-agius4 commented on May 17, 2021

anton-white commented on May 17, 2021

anton-white commented on May 17, 2021

sha-N commented on May 17, 2021

sha-N commented on May 17, 2021

anton-white commented on May 17, 2021

glued commented on May 17, 2021

alan-agius4 commented on May 18, 2021

amitagt007 commented on May 19, 2021

86 remaining items

rppig42 commented on Jan 25, 2022

Akxe commented on Feb 1, 2022

SDAdham commented on Feb 5, 2022

SDAdham commented on Feb 5, 2022

pmoleri commented on Feb 7, 2022

SDAdham commented on Feb 8, 2022

barnabasbartha commented on Apr 2, 2022

JoostK commented on Apr 2, 2022

Akxe commented on Apr 2, 2022

JoostK commented on Apr 2, 2022

Akxe commented on Apr 2, 2022

alan-agius4 commented on Jun 3, 2022

angular-automatic-lock-bot commented on Jul 4, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Command (mark with an `x`)