Easily AOT Angular Projects

by Stephen Fluin

2016-12-28

Easily AOT Angular Projects
AOT is perceived by many to be hard, but it doesn't have to be, if you are using the CLI.
One of the most important parts of building fast Angular applications is using the Ahead of Time (AOT) compiler. The compiler takes all your CSS and HTML with you Component into an NgComponentFactory, which is the JavaScript Virtual-Machine optimized output that is responsible for doing change detection, expression evaluation, etc at runtime.

Make it easy

If you use the Angular CLI, it's easy to turn AOT on for most Angular projects. At build time, simply:
ng build --aot --prod

You can also run this during development, but it's going to be slow.
ng serve --prod

This will generate a fully working version of your Angular application in your /dist/ folder. You won't ship the compiler and your application will boot faster than ever.

A couple limits

There are a couple limitations when doing AOT.
  • All Component and Module metadata has to be statically resolvable - This means you can't do lookups or evaluate complex methods in your @Component and @NgModule metadata.
  • Double check your typescript version, the CLI has trouble with some versions, try typescript@2.0.3
  • Add any dynamically loaded components (aka Components never referenced by your router or templates) to your Module's entryComponents.