Before we write code and go through components, templates in angular let’s see how angular does its compilation.
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 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.
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.