how to use ahead-of-time compiler with angular cli webpack

Question

is there a way to use AOT with angular cli?

I've installed the modules (@angular/compiler @angular/compiler-cli) and when I type ngc -p scr it creates the ngFactory.ts files and compiles it to dist/tsc-out (angular cli default in tsconfig)

not sure how to proceed from here :)

Cheers

Han

Schumer

Answer 1

All recent beta versions of the Angular CLI support AoT via the following:

ng serve --aot
ng build --aot
#and of course
ng build --prod --aot

Note: As of Angular CLI 1.0.0-beta.28 (released February 1st, 2017), --aot is on by default if --prod is specified.

Greenhaw

do you know of any tutorials on resource on that? Thanks for the response! – Schumer

@HanChe Minko Gechev, one of the main contributors, has a very thorough explanation blog post on Angular AoT: blog.mgechev.com/2016/08/14/… – Iroquoian

@OferZelig Thanks for the edit (keeping answers up to date w/ beta's isn't easy) – Greenhaw

If we use the 'aot' to build and serve, what will happen to the original main.ts? Do we need to modify this file as what we will normally do to enable AOT? E.g. use module factory in this file. – Northnortheast

No AOT related code changes are required to use AOT. – Greenhaw

what if i ng-eject ? how can i use AOT and build in prod mode? – Liegnitz

@PratikKelwalkar eject takes the same args as ng build and you can pass the same arguments in, and also you can eject multiple times with multiple settings. – Greenhaw

Answer 2

Angular-cli beta 17 now supports --aot :) !

See my tests on a brand new project (with nothing in it so) :

EDIT 1 : 28 november 2016 :
Since beta 21, AOT works with lazy loaded modules :) !
I gave some more details here : https://mcmap.net/q/902908/-angular2-aot-with-lazy-loading-can-39-t-resolve-path-to-lazy-module-ngfactory-ts

EDIT 2 : 5 may 2017 :
The cli is compiling with AOT by default if you use --prod.
(since months but an upvote reminded me of that post !)

EDIT 3 : 27 July 2017 :
If you want to reduce your bundle size even more, it's now possible by running the build with --build-optimizer. On a small app, I went from 1.3Mb to 864Kb!

Chronic

529KB still seems large. I saw a video that said we could get it below ~100kb... – Cornie

gzip could reduce ~80% – Knavery

@Akash I agree. Videos showing a bundle under 100kb are probably not using angular-cli. You would need the closure compiler which has a better tree shaking than webpack. – Chronic

@Maxime as you've mentioned its a brand new project, is it possible that the tree shaking can be any more efficient? What i mean is how many unused modules could a new project have to result in a smaller project size after tree shaking...? – Cornie

@Akash As I said, if you want a better tree shaking you might want to use the google closure compiler (or rollup) – Chronic