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.

[vadjs]

@qdouble I think, you should make more production-ready config for webpack. I mean splitting different environments ti dedicated files. Now your webpack config is unsupportable and not ready to be usen in production.

[qdouble]

@vadimzham I disagree, it's a matter of preference I suppose.

[vadjs]

@qdouble Dedication configs on production/staging/development environments it's not just preference. It's necessity.

[qdouble]

@vadimzham that's really just your opinion. There's no major difference between a production and development config that can't be solved with pushing in a few extra plugins or changing some settings based on variables. It's a design choice.

[sbehun]

It would be great if we can incorporate tree shaking into the prod AOT build process as well.

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#tree-shaking

[smyth64]

@vadimzham We are already using the webpack starter of @qdouble in production.

Have a look at this sexy & fast website :-) https://secrets.schmid.digital

It uses AoT and is ultra fast. The website is now about 4-5x faster than before! Thanks again to @qdouble . He does awesome work! :)

Check out this webpack starter, if you can't wait longer to use AoT!
https://github.com/qdouble/angular-webpack2-starter

[vadjs]

@smith64fx yea, i have to use AOT on our website too. But looks like i will use angular-cli to do it. Also now i have problems with with several packages of AOT support. So, i have to wait several days(or fix it by myself).

[smyth64]

@vadimzham Yes not every package supports AoT yet.

What i still don't really understand about Angular-cli: Is it a replacement or an extension for webpack? And in the future, what is the way to go?

btw the webpackstarter from @qdouble also uses angular-cli for AoT:

From the package.json file:

"compile:aot": "npm run sass && npm run clean:compile && npm run ngc && npm run build:aot",

[vadjs]

@smith64fx angular-cli is webpack-based tool that help you to start clear project. It will have much less code than any of angular2-webpack-starter or angular-webpack2-starter projects. Also it will help you generating new components/modules/etc.

[itrethan]

It seems there is no plan to support AOT in this repo based on the previous comments, is that true?

[katallaxie]

@itrethan 🎱 No, it is definitely something to support. I hope to do something on that frontier soon.

[katallaxie]

@itrethan Have a look at this Branch. I have just adopted a few things. Do a npm run aot && npm run build:aot and then have npm run server:prod serve it.

[unsafecode]

As far as I could do some testing, the best option so far is @ngtools/webpack.

I could make it work without too much effort, and especially without impacting my existing configuration.

[itrethan]

@katallaxie Thanks, are you going to merge this with master or just leave the aot part in a separate branch?

[katallaxie]

@itrethan we will bring it to master, hopefully with ts and dll.

[paralin]

@jskrzypek looks promising, try it? :)

[joshwiens]

Agree with @qdouble here. As it stands right now, I'm loving AoT but I have implemented it professionally in a similar fashion to Anthony, separate tasks executed explicitly. @ngtools/webpack has some outstanding issues that are blocking it's usefulness.

Small implementation details aside, the only really viable way to get AoT working in a meaningful way would be the route @qdouble took. Kind of wish I would have seen his starter prior to doing all that work myself :/ as we ended up in a similar place.

If the intent is to get AoT into this starter sooner rather than later, qdouble/angular-webpack2-starter would be the path forward.

That said, there are some pretty significant challenges with AoT once you grow your application to anything of production size. AoT is a commitment to building in a specific way, most of which won't be apparent with the small starter application. For instance, anyone using Sass in the normal fashion of using require statements in components for styles are going to have a lot of work to do.

If we are going to land AoT now, everyone should be ready for the onslaught of questions and issues when people try to pull in AoT enabled #master and their builds explode ( been there ... lol ).

Also worth noting, if we are going to release AoT support we definitely need to test the AoT builds for PRs or we are going to be breaking master every other day ( been there too ).

[fxck]

@katallaxie @d3viant0ne angular/angular-cli#3583 and angular/angular-cli#2584 is fixed as well, so I guess v6 should be more or less ready now?

[itrethan]

Any updates? This is a must have feature, any serious production app needs to have AOT enabled. People will be moving to other starters if this is missing.

[colinskow]

I've got it working perfectly. Will submit a PR very soon.

[shlomiassaf]

@colinskow @d3viant0ne
Did you get SCSS to compile with it?

From what I see no /:

Let me know if you don't I have a solution I'm running with.

[colinskow]

Currently we don't support SCSS. There is s solution in #1304.

[shlomiassaf]

@colinskow That's not only for SCSS, that's for all resource.

CSS, LESS, SCSS or whatever, they don't go through the loader chain.

Development output might not be the same as AOT.

I will post a PR soon with suggestion.

[fxck]

Is there any issue for that V6 branch? While AOT is a nice step forwards, this starter is still obsolete without DLLs and other stuff.

@katallaxie @gdi2290 @d3viant0ne ?

[colinskow]

@fxck #1341

[joshwiens]

@fxck - Obsolete without a development experience only improvement? How about you open a pull request for whatever other stuff is and contribute more than tripe comments? That includes the earlier version of the above comment where you threaten to go somewhere else.

[fxck]

@d3viant0ne say what, I'm not sure what the earlier version of that comment was, but I've long since had to move to @qdouble's starter, so I doubt I was threatening I was gonna go anywhere.

I've been advocating this starter over others for a long time and was closely following the V6 branch(which was blocked by ngtools issues at the time) which I found superior to what I'm using(as it's based on what I'm using). As soon as all the issues I knew about were resolved, I tried getting a status update on it, didn't get any answer and instead this issue, which was the only issue V6 was discussed at, as far as I know anyway, was closed, which was what prompted my last comment, asking for whether there was, or was going to be another issue created for the V6 branch. I didn't get any reply, which is why I wrote this.

So how about you cut me a slack, I didn't mean anything offensive in the slightest sense, I'm all up for helping finish that branch but without ever getting an answer about your plans going forward, it's kind of hard.

..and yes, what is currently on master is indeed obsolete, especially at the time I wrote that comment, compared to your V6 branch. At DLLs and the way and the language configs are written in, for example. And I have no idea why should I be sending PRs while you already have a a branch with all the other stuff I'm talking about.

[shlomiassaf]

@fxck You are 1 of many, you want DLL, thats cool...
Who said it's good for everyone...

[paralin]

Guys calm down, he just was asking where he could find a status update for v6.

People are WAY too quick to get dramatic.

[colinskow]

@shlomiassaf cutting development build time in half with no other side effects is good for everyone.

[fxck]

@shlomiassaf geez, DLLs are not even the point. The point was that there is a branch of THIS repo that already has both AOT and DLLs, is utilising @ngtools/webpack, is written a way more modern way, with all the configs being typesafe and written in typescript and all the while @AngularClass team members and collaborators are being completely oblivious to the fact. I honestly couldn't care less, as I had to move to qdouble's starter couple of months ago because I simply couldn't proceed without AOT, but it seems like a wasted chance, time and effort to abandon that branch, unless there are reasons for it, which is what I kept asking for.

[fxck]

import { where, find, keys } from 'lodash';

should work just fine, you might need npm i @types/lodash --save-dev though

[dang1412]

@fxck it looks nice but the checker in my terminal keep saying

[at-loader] Checking finished with 1 errors
 95% emitting[at-loader] src/app/features/sync/sync.component.ts:2:23
    Cannot find module 'lodash'.

and thus I cannot run yarn run compile

[fxck]

Have you installed @types/lodash? Depending on what version of typescript you are running, you might need types in tsconfig as well, see https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

[dang1412]

Oh thank you very much, it works just fine now @fxck !!

[shlomiassaf]

@fxck There is a branch with those but the fact that we waited led to better implementation :)

The current setup with AOT is better then @ngtools, this is until they catch up then we move back.
The router loader is solid, with AOT and absolute/alias path support.
We should have proper DLL integration without boilerplate in a day or two...

Patience :)