Ahead of time (AOT) compilation support

[itrethan]

Note: for support questions, please use one of these channels: Chat: AngularClass.slack or Twitter: @AngularClass

• I'm submitting a ...
  [ ] bug report
  [x ] feature request
  [ ] question about the decisions made in the repository
• Do you want to request a feature or report a bug?
  Request a feature, AOT support in webpack
• What is the current behavior?
  JIT compile, performance is bad in prod.
• What is the motivation / use case for changing the behavior?
  Performance boost

[IAMtheIAM]

I agree, we should use AOT compilation now that it's available in Angular2!

[unsafecode]

+1

[qdouble]

there's still a lot of bugs and peculiarities in aot that would break most people's app...so this doesn't need to be added immediately

[IAMtheIAM]

At least we can get a writeup explaining how to do it individually, so we can work the kinks out ourselves.

[itrethan]

The details could be found here: http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/

Just wondering how to do that with webpack, maybe another loader?

[Spittal]

+1

[qdouble]

I was finally able to get AOT running fine with Webpack 2, you guys can check it here: https://github.com/qdouble/angular2webpack2-starter . There is a known issue with lazy routes when using AOT though, hopefully they patch it soon angular/angular#11075

[IAMtheIAM]

@qdouble I downloaded your repo and got it to compile, excellent!. Only problem is, it doesn't work with any require() statements, like used in most webpack apps. When I try to get it working with require(my.template.html) inside a component, it just gives error:

Error: Error encountered resolving symbol values statically. Calling function 'require', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function,

[qdouble]

@IAMtheIAM that's an AOT limitation. You can't use require on your styles or templates with offline compile. It should work fine with JIT. For your html and styles, use templateUrl and stylesUrls... they will be bundled properly because the starter is using the angular2-template-loader.

[qdouble]

I've updated my starter project to fully support lazy loading in AOT mode. I have to wait until there are some more updates/bug fixes before making it a bit cleaner, but it's a viable solution for now:
qdouble/angular-webpack-starter#3

[Enlcxx]

+1

[kodeine]

@qdouble any updates on this ?

[qdouble]

@kodeine uh, my angular repo has grown and is working very well, but I'm not trying to say anything negative about this repo... my link is here: https://github.com/qdouble/angular2webpack2-starter address any issues there.

[breslavsky]

+1. AOT very important to increase speed for first start.
We have big app on angular2 and we have first init time about 2-3 sec. after 1 sec of loading.
4 seconds is not good for reactive apps. Thanks.