Angular Compiler

Before we write code and go through components, templates in angular let’s see how angular does its compilation.

Angular Compiler

In angular we will have two different approaches for compiling an application, JIT (just-in-time) and AOT(Ahead-of-time).

People often confuse with these two different approaches and say that Angular has two compilers. NO. There is only one compiler and two different approaches based on how we setup.

JIT compiling

JIT compilation is the default compilation method used in angular apps during the development process.

We can compile the app in the browser, at run time as the compiler is available in browser. So, as and when you edit the file and save it, the browser will update the content as per the code.

Though this process offers dynamic compilation, it has shortcomings as well. As JIT process needs to compile the application dynamically in the browser, lot of library code is baked into the browser as the compilation takes place in the browser itself. Roughly, the compiler will be half the size of angular itself.

As the app grows big, the compilation process slows down and the app will be slow. This has to be noted down as you’ll be worried when working with larger code base and thinking that your code is taking so long to load.

AOT compiling

As the name states this is ahead of time compilation. Meaning, the compilation is not dynamic here. The compilation will happen only once during build.

With AOT, the browser will just download the pre-compiled version of the application without waiting for the app to be compiled.

The load time is dramatically fast as only few requests will be sent to get the source files. This is done by the compiler, in-lining all the templates and css files as a single unit. Something like MVC Bundling, if you are aware of ASP.NET MVC.

We can detect template binding errors during the build process with AOT.

AOT compilation requires a little bit of setup and needs changes to change the application bootstrapping as well.

More information on AOT compiler and setup can be found in the angular site

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s