Essential Angular: Compilation

I wrote an article about the core concepts of Angular 2 a year ago, during one of the early betas. Most of it is still accurate and relevant, but not everything. For instance, I wrote it before we introduced NgModules, before the AoT compilation became a thing, and before we built the new router.

That’s why I decided to rework it into a series of posts, which will be a short, but at the same time, fairly complete overview of the key aspects of Angular2.

In this post I’ll cover one of the most important concepts of Angular: compilation.

Compilation

At the core of Angular is a sophisticated compiler, which takes an NgModule type and produces an NgModuleFactory.

An NgModule has components declared in it. While creating the module factory, the compiler will take the template of every component in the module, and using the information about declared components and pipes, will produces a component factory. The component factory is a JavaScript class the framework can use to stamp out components.

JIT and AOT

Angular 1 is a sophisticated HTML compiler that generates code at runtime. New versions of Angular have this option too: they can generate the code at runtime, or just in time (JIT). In this case the compilation happens while the application is being bootstrapped. But they also have another option: they can run the compiler as part of application’s build, or ahead of time (AOT).

Why would I want to do it?

Compiling your application ahead of time is beneficial for the following reasons:

• We no longer have to ship the compiler to the client. And so it happens, the compiler is the largest part of the framework. So it has a positive effect on the download size.
• Since the compiled app doesn’t have any HTML, and instead has the generated TypeScript code, the TypeScript compiler can analyze it to produce type errors. In other words, your templates are type safe.
• Bundlers (e.g., WebPack, Rollup) can tree shake away everything that is not used in the application. This means that you no longer have to create 50-line node modules to reduce the download size of your application. The bundler will figure out which components are used, and the rest will be removed from the bundle.
• Finally, since the most expensive step in the bootstrap of your application is compilation, compiling ahead of time can significantly improve the bootstrap time.

To sum up, using the AOT compilation makes your application bundles smaller, faster, and safer. You can read more about the performance benefits of AOT in an upcoming blog article by my Nrwl colleague Jeff Cross.

How is it possible?

Why didn’t we do it before, in Angular 1? To make AOT work the application has to have a clear separation of the static and dynamic data in the application. And the compiler has to built in such a way that it only depends on the static data. When designing and building Angular we put a lot of effort to do exactly that. And such primitives as classes and decorators, which the new versions of JavaScript and TypeScript support, made it way easier.

To see how this separation works in practice, let’s look at the following example. Here, the information in the decorator is known statically. Angular knows the selector and the template of the talk component. It also knows that the component has an input called “talk” and an output called “rate”. But the framework does not know what the constructor or the onRate function do.

Since Angular knows all the necessary information ahead of time, it can compile this component without actually executing any application code, as a build step.

Trade-offs

Since AOT is so advantageous, we recommend to use it in production. But, as with everything, there are trade-offs. For Angular to be able to compile your application ahead of time, the metadata has to be statically analyzable. For instance, the following code will not work in the AOT mode:

The window.hide property will not be defined. So the compilation will fail pointing out the error. A lot of work has been done to make the compiler smarter, so it can understand most of the day-to-day patterns you would use when building your application. But certain things will never work, like the example above.

Let’s Recap

• The central part of Angular is its compiler.
• The compilation can be done just in time (at runtime) and ahead of time (as a build step).
• The AOT compilation creates smaller bundles, tree shakes dead code, makes your templates type-safe, and improves the bootstrap time of your application.
• The AOT compilation requires certain metadata to be known statically, so the compilation can happen without actually executing the code.

Essential Angular Book

This article is based on the Essential Angular book, which you can find here https://leanpub.com/essential_angular. If you enjoy the article, check out the book!

Victor Savkin is a co-founder of Nrwl. We help companies develop like Google since 2016. We provide consulting, engineering and tools.

If you liked this, click the 👏 below so other people will see this here on Medium. Follow @victorsavkin to read more about monorepos, Nx, Angular, and React.