13

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

Han Che
  • 8,239
  • 19
  • 70
  • 116

2 Answers2

29

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.

Ofer Zelig
  • 17,068
  • 9
  • 59
  • 93
Brocco
  • 62,737
  • 12
  • 70
  • 76
  • do you know of any tutorials on resource on that? Thanks for the response! – Han Che Aug 26 '16 at 17:59
  • 1
    @HanChe Minko Gechev, one of the main contributors, has a very thorough explanation blog post on Angular AoT: http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/ – Ofer Zelig Feb 09 '17 at 23:47
  • 1
    @OferZelig Thanks for the edit (keeping answers up to date w/ beta's isn't easy) – Brocco Feb 10 '17 at 03:12
  • 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. – gye Mar 29 '17 at 15:47
  • No AOT related code changes are required to use AOT. – Brocco Mar 29 '17 at 19:05
  • what if i ng-eject ? how can i use AOT and build in prod mode? – Pratik Kelwalkar Jun 01 '17 at 06:32
  • @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. – Brocco Jun 01 '17 at 19:16
22

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

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

enter image description here

EDIT 1 : 28 november 2016 :
Since beta 21, AOT works with lazy loaded modules :) !
I gave some more details here : https://stackoverflow.com/a/40788258/2398593

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!

maxime1992
  • 22,502
  • 10
  • 80
  • 121
  • `529KB` still seems *large*. I saw a video that said we could get it below `~100kb`... – Aakash Nov 11 '16 at 06:41
  • 1
    gzip could reduce ~80% – Tzach Ovadia Nov 28 '16 at 08:56
  • 1
    @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. – maxime1992 Dec 14 '16 at 18:41
  • @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*...? – Aakash Dec 15 '16 at 02:39
  • 1
    @Akash As I said, if you want a better tree shaking you might want to use the google closure compiler (or rollup) – maxime1992 Dec 15 '16 at 07:14