Angular 2 AoT Heep Errors

[naveedahmed1]

AoT compilation resulting in " JavaScript heap out of memory" error

I am trying to compile my project by following the AoT guide available on angular.io

Below is my typesccript configuration file for aot

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": false,
    "target": "es5",
    "outDir": "../content/app/"
  },
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit": true
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

I am compiling using below command:

D:\MyProject\node_modules\.bin>ngc -p ../../app/tsconfig-aot.json

It takes times in compilation and ends up with below errors:

<--- Last few GCs --->

  215225 ms: Mark-sweep 1327.9 (1434.3) -> 1316.1 (1434.3) MB, 1233.5 / 0.0 ms [allocation failure] [GC in old space requested].
  216639 ms: Mark-sweep 1316.1 (1434.3) -> 1316.1 (1434.3) MB, 1413.5 / 0.0 ms [allocation failure] [GC in old space requested].
  217985 ms: Mark-sweep 1316.1 (1434.3) -> 1320.4 (1403.3) MB, 1346.7 / 0.0 ms [last resort gc].
  219337 ms: Mark-sweep 1320.4 (1403.3) -> 1324.6 (1403.3) MB, 1351.5 / 0.0 ms [last resort gc].


<--- JS stacktrace --->

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

Security context: 00000023CEBCFB61 <JS Object>
    1: copyProperties [D:\MyProject\node_modules\typescript\lib\typescript.js:1462] [pc=000001870A3EC95C] (this=000000AAE12C6A41 <an Object with map 00000279F6259FA1>,source=000002E70921E389 <an Object with map 00000279F62D8539>,target=000002ED3C5C7691 <an Object with map 000000D6F40CD1C9>)
    2: objectTypeRelatedTo [D:\MyProject\node_modules\typescript\lib\typescript.js:...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

D:\MyProject\node_modules\.bin>

The project I am trying to compile has 467 files.

[DzmitryShylovich]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[naveedahmed1]

Are you sure its not a bug in AoT compiler?

[lazarljubenovic]

Even if it really was a bug, you still have to fill out the template which was presented to you while opening this issue (which you apparently just deleted).

[singhjusraj]

Anyone found any solution to this?
ngc runs fine for the first time when things are in JIT mode in main.ts, after first run, I change main,ts to AoT mode.
Then ngc takes a while to compile and the process ends up out of memory.

I couldn't find a solution anywhere
Questions on StackOverflow are unanswered.
I've tried compiling on both Windows and Mac and the process runs out of memory between 1400MB - 1460MB.

It's been over a month for me and there is still no solution to this problem.
Any help will be appreciated thanks..

[alexeagle]

How about giving node more memory by setting --max_old_space_size ?

[singhjusraj]

how can I do that along with ngc?
I've tried node --max-old-space-size=2048 ./node_modules/.bin/ngc -p tsconfig.json
It doesn't work

[alexeagle]

Hmm, you could give it more memory than that, but perhaps there's something about the application you're building that causes ngc to leak memory or consume a great amount of memory.
We build angular itself and haven't seen this, but we don't have any project that compiles a very large number of components in a single pass.

Any idea how we can reproduce the issue?

[singhjusraj]

@alexeagle thanks for helping me out here.
In my previous comment I meant I'm unable to assign more memory to node. I'm probably not doing it correctly on command line.

here is my script in package.json

"scripts": { "ngc": "node --max-old-space-size=2048 ./node_modules/.bin/ngc -p tsconfig.json" },

when I do npm run ngc its gives syntax error as following:
`C:\Users\sukhdeep\Documents\Angular\gd_dev_server\node_modules.bin\ngc:2
basedir=$(dirname "$(echo "$0" | sed -e 's,,/,g')")
^^^^^^^

SyntaxError: missing ) after argument list
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:974:3
`

I'm probably not doing it right.

About the project size, Yes I'll consider my project large as there is lot of HTML in the DOM and there is lot of two way data binding. My aot folder after first ngc compile comes at 15.8MB in size.

@naveedahmed1 you have any input on your project size?

I have another project which is written in exactly the same way, (I've followed proper typescript syntaxes and Angular best practices in both) but has far fewer modules and the aot folder size in that project is just 1.80MB. I don't have any heap issues in that project.

To reproduce, I guess projects that have lot of HTML and data binding are all having this issue.
My repo is private otherwise I would've just given it

[naveedahmed1]

@Sukh9212 after seeing activity on this issue, I just recompiled my project by following the official AoT guide:

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

I have exact same tsconfig-aot.json file as in above guide except "noImplicitAny": false,.

My App folder has 487 files including components, modules, directive, guards, services and templates.

After compilation aot folder has 344 files and its size is 17.2MB.

After updating main.ts to:

import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './aot/app.module.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

I get the same error which you have mentioned above. One more thing my app is using Lazyloading.

BTW, this is the error after modifying the main.tx

<--- Last few GCs --->

  263129 ms: Mark-sweep 1312.5 (1434.6) -> 1312.4 (1434.6) MB, 1813.2 / 0.0 ms [allocation failure] [GC in old space requested].
  265031 ms: Mark-sweep 1312.4 (1434.6) -> 1312.3 (1434.6) MB, 1902.1 / 0.0 ms [allocation failure] [GC in old space requested].
  266953 ms: Mark-sweep 1312.3 (1434.6) -> 1315.6 (1407.6) MB, 1921.0 / 0.0 ms [last resort gc].
  268920 ms: Mark-sweep 1315.6 (1407.6) -> 1318.9 (1407.6) MB, 1966.8 / 0.0 ms [last resort gc].


<--- JS stacktrace --->

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

Security context: 00000206D17CFB61 <JS Object>
    1: getTypeOfVariableOrParameterOrProperty [D:\Project\node_modules\typescript\lib\typescript.js:~20066] [pc=0000035B369D90BF] (this=00000206D17E6601 <JS Global Object>,symbol=00000170AC196F69 <a SymbolObject with map 0000020C13D6ABC1>)
    2: checkVariableLikeDeclaration [D:\Project\node_modules\typescript\lib\typescript.js:~31339] [pc=0000035B35F3EBF3] (this=00000...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

@alexeagle I can email you my app folder, which you would be able to compile. But since it has a dependence on backend in asp.net (which I cann't share) you wont be able to run the project.

@Sukh9212 if you arent using Lazyloading, can you try to compile your project using Angular CLI and see if it works? In angular cli you can compile your project using below command.
ng build --prod --aot

For me its not working since my app is using lazyloading.

[singhjusraj]

I'm not using lazy loading since I figured that if I do, ngc just ignores all the lazy loaded modules and doesn't generate AoT code for them. I'm not sure if it's supposed to do that or not.
So not doing that and importing all the modules in my app.module file.

My project isn't Angular CLI based so I won't be able to do that.
It's actually not even a problem of which tool we are using. At the end of it, it's the same ngc compiler and doesn't matter how we invoke it, the process is gonna run out of memory

[naveedahmed1]

Please have a look at below repository:

https://github.com/steveblue/angular2-rollup

and check the Production notes:

https://github.com/steveblue/angular2-rollup#production

It also suggests that there are some issues with ngc when using for large projects and it recommends using Closure Compiler after compiling with ngc.

@vicb can you please help on this?

[singhjusraj]

I think closure compiler isn't ready yet for Angular 2 see issue #8550 and this link
Even if closure compiler works, still I would like ngc to do the entire job that it is supposed to do as it is demonstrated in the official tutorials.
Angular 2 isn't in beta or RC anymore, but we still can't generate a production build out of it.
Waiting for it for over a month and half now.

[singhjusraj]

OK folks here is how I FINALLY compiled my project with ngc

This doesn't work on windows for some reason, but it worked on a mac machine

//first compile with main.ts in JIT mode
./node_modules/.bin/ngc -p tsconfig-aot.json

//then change main.ts to AoT mode and run
node --max-old-space-size=8192 ./node_modules/.bin/ngc -p tsconfig-aot.json

I literally had to go as far as 8192 (8GB) to not run out of memory (it goes as far as 5-6GB for my project)

//then build the rollup bundle
node --max-old-space-size=8192 node_modules/.bin/rollup -c rollup.js

if everything went well, now you should have a production bundle.

I'm not using lazy loading as if I do, ngc just ignores all the lazy loaded modules and does not generate AoT files for them.

My machine is

[naveedahmed1]

That's great, but it does indicate that NGC has issues and needs to be optimized for memory usage.

In Windows, does this mean that node just ignores max-old-space-size?

BTW what is the size of the final bundle? and how long does it now takes to run the app in browser?

[singhjusraj]

Yes, I believe that ngc does have some memory management issues as I don't think my project is that huge for a compiler to take up 5-6GB of RAM.

In windows there are probably some path issues on the command line and the command just errors out as following:

`$ node --max-old-space-size=8192 ./node_modules/.bin/ngc -p tsconfig-aot.json
C:\Users\sukhdeep\Documents\Angular\gd_dev_server\node_modules.bin\ngc:2
basedir=$(dirname "$(echo "$0" | sed -e 's,,/,g')")
^^^^^^^

SyntaxError: missing ) after argument list
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:974:3
`

I don't think it's a problem with max-old-space-size, it's just windows command line problem I guess.

the size of the final bundle for me is 8.2MB, which isn't small

I'm okay with the build size for now, but of course I would like it to be smaller than that.
In browser the app loads in about 3 seconds, but that will of course vary depending upon the internet and the webserver

[naveedahmed1]

Both 8.2 Mb bundle size and 3 seconds load time is very large for a live web app. Maybe AoT with support of Lazy loading could give a better bundle and improve load time.

[alexeagle]

8.2 MB seems wrong. Can you use the source-map-explorer package to
determine where the size is coming from?

On Thu, Nov 3, 2016 at 8:36 AM Naveed Ahmed notifications@github.com
wrote:

Both 8.2 Mb bundle size and 3 seconds load time is very large for a live
web app. Maybe AoT with support of Lazy loading could give a better bundle
and improve load time.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#12184 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAC5I-kgccbYUmu_he4u91gjaWupCS3Yks5q6fvIgaJpZM4KSCLp
.

[singhjusraj]

After using the source-map-explorer here is what I get

and strangely, if you look at the top of the tree, the size is 927KB which I think should truely be the size of the bundle. But the actual size is 8.2 MB.

No idea how.

here is my rollup.js file

import rollup from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify'

export default {
  entry: 'app/main.js',
  dest: 'dist/build.js', // output a single application bundle
  sourceMap: true,
  sourceMapFile: 'dist/build.js.map',
  format: 'iife',
  plugins: [
    nodeResolve({ jsnext: true, module: true }),
    commonjs({
      include: [
        'node_modules/rxjs/**',
        'node_modules/ng2-cookies/**',
        'node_modules/angular2-highcharts/**'
      ],
      namedExports: {
        'node_modules/ng2-cookies/ng2-cookies.js': ['Cookie'],
        'node_modules/angular2-highcharts/index.js': ['ChartModule']
      }
    }),
    uglify()
  ]
}

[singhjusraj]

@naveedahmed1 about lazy loading

How do you propose that lazy loading will give better bundle and improve loading time?
The whole concept of lazy loading is to load JS,HTML,CSS files for lazy loaded modules in the background or on demand.

And since the entire idea of generating a rollup bundle is to pack everything in one JS file, how would the router lazy load modules when everything is in one file?

Correct me if I'm wrong but the lazy loading is only going to work if you are using a module loader like SystemJS or WebPack. I don't think it is anyway possible to achieve in a rollup bundle

[alexeagle]

The concept is, first you split code into lazy loadable units, then use
some tooling to create one bundle for each unit. Then you XHR to fetch the
next bundle when needed.
We have more work to do to make this convenient.

For the discrepancy between file size and reported sourcemap size, try
manually inspecting the JS file to see where the size comes from?

On Thu, Nov 3, 2016 at 11:50 AM Sukhdeep Singh notifications@github.com
wrote:

@naveedahmed1 https://github.com/naveedahmed1 about lazy loading

How do you propose that lazy loading will give better bundle and improve
loading time?
The whole concept of lazy loading is to load JS,HTML,CSS files for lazy
loaded modules in the background or on demand.

And since the entire idea of generating a rollup bundle is to pack
everything in one JS file, how would the router lazy load modules when
everything is in one file?

Correct me if I'm wrong but the lazy loading is only going to work if you
are using a module loader like SystemJS or WebPack. I don't think it is
anyway possible to achieve in a rollup bundle

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#12184 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAC5IwdbByW31eX_DMwqY67K-LDrCcL5ks5q6izxgaJpZM4KSCLp
.

[singhjusraj]

Looking at the JS bundle doesn't seem to help. It is one enormous minified file.
I'm not sure how would I inspect it, and where/what to look for to know where the size is coming from

[naveedahmed1]

@SinghSukhdeep did you find any solution for Windows? It seems that max-old-space-size doesn't have any effect on Windows.

[singhjusraj]

I haven't tried on Windows since then. I'll let you know if I figure it out.

[naveedahmed1]

One thing I noticed is that the correct option to specify memory limit is max_old_space_size and not max-old-space-size most of the posts I see on internet mention it with hyphens its actually with underscores. I verified it by runing the command node --v8-options.

[steverob2k]

On windows you can use this:

node --max-old-space-size=8192 node_modules/@angular/compiler-cli/src/main.js -p tsconfig-aot.json

[VladimirAmiorkov]

Also getting this error in my project, yes the project does have a lot of directives but are there really such limitations with ngc? Pushing the --max-old-space-size 16000 does not work for me and that is the max of my Mac.

I have couple of 2000 lines files with custom directives, should I try to split the directives and components in more files, will that help at all?

[alexeagle]

ngc ought to use less memory. It may take some time before we can address this. In the meantime, one approach to try is to compile smaller chunks of the application at a time. As the application scales, even tsc by itself can take many seconds, which slows down your development roundtrip. The idea is to tell your build system about several "libraries", each one lists its dependent libraries. Then you run both ngc only on one library at a time, giving it .d.ts and .metadata.json (or now ngsummary.json) files as inputs, and only generating code for the .ts inputs.

…

On Wed, Dec 14, 2016 at 6:53 AM Vladimir Amiorkov ***@***.***> wrote: Also getting this error in my project, yes the project does have a lot of directives but are there really such limitations with ngc? Pushing the --max-old-space-size 16000 does not work for me and that is the max of my Mac. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12184 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAC5I6mU6IuYxHmPD_5PJOL1qIe4Vp0Uks5rIAL2gaJpZM4KSCLp> .

[VladimirAmiorkov]

Hi @alexeagle ,

Thank you for the prompt response.

This is what I was considering to try out but it will not be pretty as I am building a plugin that already has its structure implemented and working without issues and now all I am trying is to make it possible to ship it to npm with the necessary AoT files. I will try to think of something but it would be great if the OOM issues of ngc are resolved as I do see many people facing this.

[VladimirAmiorkov]

@alexeagle

A quick followup, I was running nodejs version 6.8.1 and updated to the latest 6.9.2. After that I ran the following script:

"scripts": {
    "ngc": "node --max-old-space-size=8192 ./node_modules/.bin/ngc -p tsconfig.json",
    "tsc": "tsc -p tsconfig.json",
    "prepublish": "npm run tsc && npm run ngc"
  }

and was able to run ngc correctly on my entire project. Previously I did try with --max-old-space-size=16000 and was getting the OOM error, it looks like the nodejs 6.8.1 was the cause.

[alexeagle]

Great, thanks for that note.

…

On Wed, Dec 14, 2016 at 7:57 AM Vladimir Amiorkov ***@***.***> wrote: @alexeagle <https://github.com/alexeagle> A quick followup, I was running nodejs version 6.8.1 and updated to the latest 6.9.2. After that I ran the following script: "scripts": { "ngc": "node --max-old-space-size=8192 ./node_modules/.bin/ngc -p tsconfig.json", "tsc": "tsc -p tsconfig.json", "prepublish": "npm run tsc && npm run ngc" } and was able to run ngc correctly on my entire project. Previously I did try with --max-old-space-size=16000 and was getting the OOM error, it looks like the *nodejs 6.8.1 was the cause*. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12184 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAC5I56D2W8VsziqKrHpRNOiOmcf_gfVks5rIBHvgaJpZM4KSCLp> .

[ritzm21]

Hi all,
I am also facing same heap error in my ionic 2 project as a result of adding many new components, directives in it. Here is the build script for ionic 2 project in package.json:
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},

And I modified it based on above discussion as below:
"scripts": {
"ionic:build": "node --max-old-space-size=8192 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build",
"ionic:serve": "ionic-app-scripts serve"
},

But I am still facing javascript heap error. Can anybody help me to understand that above modified script is a right approach to increase the heap size for node?
I am using Windows Command Line(cmd) tool to build the ionic 2 app.

[ValterSantosMatos]

@ritzm21 actually that worked for my Ionic2 project.

[tbosch]

So we need to do 2 things:

• allow build tools to compile big applications as multiple compilation units (i.e. multiple invocations of ngc). We already do this internally at Google, and we need to find a way to make this work nicely externally as well
• change ngc's memory consumption to be independent of the project size

[Neltherion]

any update on this? I used 8 GBs for a simple Bootstrap project and even 8 GBs couldn't do it!
the command that worked for me is :
node --max-old-space-size=8192 node_modules/rollup/bin/rollup -c rollup-config.js

[damiandennis]

I need to allocate 5GB just to compile a medium sized app.

[Koslun]

For everyone posting their results I think a more detailed build configuration and project information is needed to get any real insight.

Rollup, Webpack and other bundlers each have their own overhead, changing also vastly depending on version and configuration, including for instance which webpack plugins are used and how they are configured. Angular version is also important to understand what angular compiler is used. Where both the bundler and the angular compiler can consume a great amount of RAM. See an example breakdown here for meeting 2017-11-21: https://docs.google.com/document/d/1wMHjLdXrcGw-8N50mJqqiyFA_upkc6_fTd2vEhOM0-k/pub

Following a larger regression for angular-cli 1.5, in terms of memory usage, reducing the memory usage is being actively worked on, see: angular/angular-cli#5618. Though this largely does not cover optimizing the angular compiler.

This has partly added to Webpacks ModuleConcatenationPlugin being heavily optimized in terms of RAM usage. See webpack/webpack#5992 and webpack/webpack-sources#30.

[IgorMinar]

It seems that this bug ended up being the catch all place for all kinds of memory related issues. We fixed a whole bunch of them in v4 and then again just after v5.0 was released. Please help us sort these issues out by open new issues with reproductions if you still have memory related problems. Thank you.

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