--watch --aot crashes with "JavaScript heap out of memory" and is slow (Beta 5, TypeScript 2.7)

[pascallaprade-beslogic]

Versions

Your --version command seems to be broken:

λ node_modules\.bin\ng --version
The specified command (undefined) is invalid. For available options, see `ng help`.
Error: The specified command (undefined) is invalid. For available options, see `ng help`.
    at C:\Users\[...]\node_modules\@angular\cli\models\command-runner.js:43:19
    at Generator.next (<anonymous>)
    at C:\Users\[...]\node_modules\@angular\cli\models\command-runner.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (C:\Users\[...]\node_modules\@angular\cli\models\command-runner.js:3:12)
    at runCommand (C:\Users\[...]\node_modules\@angular\cli\models\command-runner.js:23:12)
    at CLI.run (C:\Users\[...]\node_modules\@angular\cli\ember-cli\lib\cli\cli.js:98:13)
    at module.exports (C:\Users\[...]\node_modules\@angular\cli\ember-cli\lib\cli\index.js:55:14)
    at default_1 (C:\Users\[...]\node_modules\@angular\cli\lib\cli\index.js:47:12)
    at C:\Users\[...]\node_modules\@angular\cli\bin\ng:195:5

But it should be 6.0.0-beta.5, with the following environment:

λ node --version
v9.8.0
λ npm --version
5.6.0
λ ver

Microsoft Windows [version 10.0.16299.251]

Repro steps

• Have a relatively big project (I don't know if it matters, but I guess the bigger, the worse) (ours is 47,000+ TypeScript lines and 12,000+ lines of Angular templates, see cloc output below)
• Use TypeScript 2.7.2. I don't know if it matters or not, I didn't try with a version between 2.4 and 2.6, as suggested. If it does matter, then I guess you plan to support it quite soon, so this issue should still matter.
• Start an AOT watch mode: ng build --watch --aot
• First build is excruciatingly long to finish (421047ms - 7.01745 minutes! - for my latest attempt, but previous ones were all similarily very slow).
• Load your page.
• Do any change (I added an [ngClass] directive to a button in my case) and save it.
• Watch triggers.
• Build stays at 10% building modules 0/1 modules 1 active ...ClientApp\app\app.module.ngfactory.js during more than 10 minutes (I didn't think to time it, sorry), then crashes.
• During the incremental build, CPU usage of the Node.js process is between 40-50%, according to the Windows Task Manager, and its memory usage reaches around 1.7 GB.
• Crash output is shown below, cites Allocation failed - JavaScript heap out of memory as a reason.

I attempted this three times, today, before reverting to non-AOT builds.

I tried using version 6.0.0-beta.6, but it breaks our project by not finding non-relative @imports in our less files, similar as reported here: #10007.

Edit: I tried using ng serve --aot, and it crashed the same way, but directly at the initial build, not at the incremental build.

Observed behavior

Here is my terminal output (with some information redacted with [...]):

λ npm run watch:aot

> [...] watch:aot C:\Users\[...]
> ng build --watch --aot


@angular/[email protected] requires typescript@'>=2.4.2 <2.7.0' but 2.7.2 was found instead.
Using this version can result in undefined behaviour and difficult to debug problems.

Please run the following command to install a compatible version of TypeScript.

    npm install typescript@'>=2.4.2 <2.7.0'

To disable this warning run "ng set warnings.typescriptMismatch=false".

 10% building modules 3/3 modules 0 active(node:54108) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead                                                        Date: 2018-03-19T20:22:53.081Z
Hash: e5820854c0f3a534d20b
Time: 421047ms
chunk {main} main.js, main.js.map (main) 10.3 MB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 470 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 69.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 9.61 MB [initial] [rendered]
 10% building modules 0/1 modules 1 active ...ClientApp\app\app.module.ngfactory.js
<--- Last few GCs --->

[54108:00000167395784F0]  1911824 ms: Mark-sweep 1389.1 (1567.8) -> 1388.9 (1568.8) MB, 3512.7 / 0.1 ms  allocation failure GC in old space requested
[54108:00000167395784F0]  1916049 ms: Mark-sweep 1388.9 (1568.8) -> 1388.8 (1527.3) MB, 4223.8 / 0.1 ms  last resort GC in old space requested
[54108:00000167395784F0]  1920987 ms: Mark-sweep 1388.8 (1527.3) -> 1388.8 (1517.8) MB, 4937.0 / 0.1 ms  last resort GC in old space requested


<--- JS stacktrace --->

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

Security context: 0000030B01025529 <JSObject>
    1: getSymbolLinks(aka getSymbolLinks) [C:\Users\[...]\node_modules\typescript\lib\typescript.js:~25270] [pc=00000287D96BBF57](this=0000023C7C2022D1 <undefined>,symbol=0000019B48ECE841 <SymbolObject map = 000003312A5DC619>)
    2: resolveAlias(aka resolveAlias) [C:\Users\[...]\...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::DecodeWrite
 2: node_module_register
 3: v8::internal::FatalProcessOutOfMemory
 4: v8::internal::FatalProcessOutOfMemory
 5: v8::internal::Factory::NewUninitializedFixedArray
 6: v8::internal::WasmDebugInfo::SetupForTesting
 7: v8::internal::WasmDebugInfo::SetupForTesting
 8: v8::internal::WasmDebugInfo::SetupForTesting
 9: v8::internal::WasmDebugInfo::SetupForTesting
10: v8::internal::SharedFunctionInfo::SetScript
11: v8::internal::JSReceiver::class_name
12: v8::internal::SourcePositionTableIterator::Advance
13: v8::internal::SourcePositionTableIterator::Advance
14: 00000287D82843C1
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! [...] watch:aot: `ng build --watch --aot`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the [...] watch:aot script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[...]\AppData\Roaming\npm-cache\_logs\2018-03-19T20_47_36_002Z-debug.log

Desired behavior

Watch mode should be reliable. It should not crash on incremental builds. It should not take up to 7 minutes to make the initial build (even in AOT) when in development mode. Incremental development builds should be fast.

Mention any other details that might be useful (optional)

Here is the size of our project according to cloc. I don't know if it will be useful, but I guess the project size has an impact on build times, which in turn may be the cause of the crash. I don't know if our project size is above average, or if many people have even larger projects and do not experience similar issues.

http://cloc.sourceforge.net v 1.64  T=6.46 s (186.0 files/s, 13013.3 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
TypeScript                     785           9108           1527          47033
HTML                           214            375             57          12497
LESS                           196           2124             50           9167
Javascript                       1              0              7           1196
SASS                             3            109             12            762
JSON                             2              0              0             54
CSS                              1              0              0              3
-------------------------------------------------------------------------------
SUM:                          1202          11716           1653          70712
-------------------------------------------------------------------------------

[krishollenbeck]

We've seen this happen on occasion with Angular 5 as well. Our solution (workaround?) is to run ng serve with the max_old_space_size param.

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

[pascallaprade-beslogic]

Thank you! It does indeed allow me to build our project using AOT. Given that it's a lot of memory, I'd think this is more a workaround than a solution, but it does the job for now. Thanks again!

[sreekumarp]

Any fix in angular 6 ?

[alan-agius4]

This issue has been open for a while now and it seems that the issue happened using an unsupported TypeScript version.

While I don't exclude a memory leak, as the application grows you'll need more and more memory to build it, thus using max_old_space_size is perfectly acceptable.

Please update to the most recent Angular CLI version and If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

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