(Unleash the power of) Angular AoT Compilation

What's Angular AoT Compilation?

Angular AoT (for Ahead-of-Time) compilation is the new feature added to Angular to significantly boost performance. All the cool kids are doing it. It is a way to improve performance by doing most of the heavy lifting at build time.

Angular also works without AoT, just like AngularJS (version 1.X) used to. The compiler works in JIT mode (Just-in-Time), which means it runs on the user machine every time the app is loaded. Every time you run an Angular app, the JIT compiler generates JavaScript for each component to render the app.

Most of this work could (and now, can) be done at build time, and that's precisely what AoT is about. The compiler runs during build time and performs the compilation of the templates so the app can be rendered instantly at run time, significantly improving performance. It will inline all HTML and CSS for components into the JavaScript to avoid requesting these files separately, thus reducing the number of external Ajax requests.

Cool side effect number one: since everything has already been compiled, there is no need to bundle the Angular compiler with your app, which reduces the size of the bundle by a lot (the Angular compiler takes roughly half the size of the framework).

Cool side effect number two: compiling ahead of time will detect errors in template, which helps prevent some issues at runtime.

Use it. AoT Compilation is really what makes Angular performant and competitive in the world of front-end frameworks, and it doesn't impact your development habits. Read more about AoT in this official Angular guide.

AoT by the numbers

Using the default app generated by Angular-Cli, I ran some benchmark to show you the difference on using JIT compilation VS using AoT compilation. The results clearly show that AoT is a significant improvement in Angular performance and should definitely be used for your Angular project.

These numbers will obviously change when working with a larger app, but they can only get better as larger apps mean more templates to compile and to render.

For a more in-depth analyse of the performance of AoT Compilation, read this awesome article.

How do I activate AoT?

Now that you really want AoT for your Angular app, let's take a quick look at how to activate it. We aren't going to talk about how AoT really works under the hood. There are a lot of really good articles on this topic and you might not even care, you just want to use it on your Angular app. If you want to know exactly how AoT Compilation works, take a look at this great article.

Using angular-cli

If you bootstrapped your Angular app with angular-cli, you shouldn't even be here, because you just need to use the --aot flag on the ng build command. Even better, AoT compilation has now been activated by default for the -prod flag, so just use

ng build -prod

And that's it. You're done. Congrats. Do a happy dance.

Using Webpack

If you're using Webpack, you will need two things: the NgcLoader loader, and the AoT plugin.

Let's install the angular tools for webpack:

npm install @angular/compiler-cli @ngtools/webpack --save-dev

Add the angular compiler loader to your module rules:

conf.module.rules.push(
  { test: /\.ts$/, loaders: ['@ngtools/webpack'] }
);

And the AoT plugin to the list of plugins:

new AotPlugin({
  tsConfigPath: './tsconfig.json',
  entryModule: 'src/app/app.module#AppModule' // Replace with the path and classname of your App Module
}),

Read more about activating AoT with webpack in this great article.

Take a look at the AoT Webpack Plugin doc.