out of memory on ng serve with i18n and targeting es5

[nomeaning777]

🐞 Bug report

Command (mark with an x)

• new
• build
• 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: 9.1.12

Description

If the Angular project satisfies the following conditions, the memory usage of ng serve is excessive

• it uses i18n with @angular/localize
• it is configure to target ES5
• it loads large object from external library.

The issue doesn't happen if I changed the target to ES2015 or disabled i18n.
ng build and ng serve --no-source-map is also not affected.

🔬 Minimal Reproduction

1. ng add @angular/localize
2. create a translation file and add configuration to angular.json.
3. set target in tsconfig.base.json to "es5" and enable IE11 in browserlist.
4. add external npm library which contains large object and use it from a component.
   • I can reproduce with encoding-japanese and text-encoding.
5. run ng serve and it consumes a lot of memory.

reproduction: https://github.com/nomeaning777/ng-serve-memory-issue-reproduction

🔥 Exception or Error

ng serve failed with OOM Error.

$ ng serve
Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
61% building 452/525 modules 73 active ...copy/node_modules/rxjs/_esm2015/internal/scheduled/scheduled.js
<--- Last few GCs --->

[21673:0x394f380]    58405 ms: Mark-sweep 2040.1 (2051.0) -> 2039.1 (2050.7) MB, 1138.9 / 0.0 ms  (average mu = 0.196, current mu = 0.140) allocation failure scavenge might not succeed
[21673:0x394f380]    58411 ms: Scavenge 2040.2 (2050.7) -> 2039.6 (2050.7) MB, 4.4 / 0.0 ms  (average mu = 0.196, current mu = 0.140) allocation failure 
[21673:0x394f380]    58416 ms: Scavenge 2040.3 (2050.7) -> 2039.7 (2051.2) MB, 4.0 / 0.0 ms  (average mu = 0.196, current mu = 0.140) allocation failure 


<--- JS stacktrace --->

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

    0: ExitFrame [pc: 0x13cce79]
    1: StubFrame [pc: 0x1385c90]
Security context: 0x3288a37008d1 <JSObject>
    2: SourceMapConsumer_allGeneratedPositionsFor [0x2ecf1f66d6b9] [/home/nomeaning/work/test-i18n-copy/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:~178] [pc=0x668731d9e79](this=0x3b96a3300119 <BasicSourceMapConsumer map = 0x3ccb94ddb2d9>,0x17182cabd949 <Object map = 0x3ccb94dda889>)
    3: /* anony...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa0bb60 node::Abort() [ng serve]
 2: 0xa0bf6c node::OnFatalError(char const*, char const*) [ng serve]
 3: 0xb820fe v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [ng serve]
 4: 0xb82479 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [ng serve]
 5: 0xd2ee35  [ng serve]
 6: 0xd2f4c6 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [ng serve]
 7: 0xd3bd45 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [ng serve]
 8: 0xd3cbf5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [ng serve]
 9: 0xd3f6ac v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [ng serve]
10: 0xd0615b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [ng serve]
11: 0x1047d9e v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [ng serve]
12: 0x13cce79  [ng serve]
zsh: abort (core dumped)  ng serve

🌍 Your Environment

Angular CLI: 10.0.4
Node: 12.18.2
OS: linux x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.4
@angular-devkit/build-angular     0.1000.4
@angular-devkit/build-optimizer   0.1000.4
@angular-devkit/build-webpack     0.1000.4
@angular-devkit/core              10.0.4
@angular-devkit/schematics        10.0.4
@angular/cli                      10.0.4
@ngtools/webpack                  10.0.4
@schematics/angular               10.0.4
@schematics/update                0.1000.4
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

I reproduced it in Github Actions: https://github.com/nomeaning777/ng-serve-memory-issue-reproduction/runs/922735595 . This occurs regardless of the Node version or OS version.

[madebyakash456]

I was able to reproduce this issue with node 10.16.0. Although, after updating the node version to 12.18.3(LTS), it works fine.
But the issue is inconsistent. I could reproduce this in one of my projects, whereas the other ones are working fine.

[ly-cultureiq]

I'm also able to reproduce on node 14.9 and angular 10.0.16

[zhuweid]

I am experiencing the same issue here

target: es2015
angular: 10.0.0
@angular-devkit/build-angular: 0.1000.4
and with i18n

however, in my case, the target does not matter, but if I turn off the AOT, the issue goes away

[witeck]

Is there anything known about this thread? I have the same problem in angular 10.2.0

[isinbahadir]

I have the same problem (ng serve, localize:"X", es5 ) in angular 11.0.2...
if i set localize: false or change the target to es6 problem disappears...

[xavadu]

The same with Angular 10.2.1 and Node v10.23.0 following the Documentation with this config, doing ng serve --configuration=en,es5 doesn't work

"es5": {
  "localize": [
     "en"
  ],
  "tsConfig": "./tsconfig-es5.app.json"
}

[DmitryEfimenko]

+1 (keeping the issue alive)
I tried using solutions posted here and tried increasing memory to 16GB, but that didn't help.

[angular-automatic-lock-bot]

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