Compilation in Angular Part-II
Architecture
Hello everyone! You must have gone though the part-I of this article which is, Compilation in Angular Part-I, where we understood two modes of compilation AOT and JIT. In subsequent parts, we will understand more on how the compiler works. First let’s get started with the architecture of compilation.
How is the Compiler Set Up ?
We need to understand how the compiler is set up since it will help us to understand how TypeScript actually works under the hood as our compiler is based on TypeScript(TS).
The regular TS compiler is based on three phases: Program creation, Type-checking & Emit phases.
And Angular compiler has built on top of that, adding two more phases: an Analysis step and Resolve step. Let’s understand these steps one by one.
1] Program Creation
Here, TS find outs all the source files which are required to understand our program & it begins with tsconfig.json file. It recursively find imports of those and discover more files might be from app/other libs imported from node modules unti it’s seen all the code it needs to see the types in our program & checks them correctly.
In case with Angular we add into this process a little bit by adding some extra files that are not necessarily we write and that’s why it’s possible to import the factory files.
2] Analysis
In this step, it’s taking the full set of files from our code & looking through all the classes in them and trying to find out the ones which are decorated with the Angular decorators. Then it tries to understand what the parts of our application are, the components, the modules, the services, the directives and so on in isolation. If it’s a component, it will parse the template, likewise.
During the analysis phase, it is only looking at these classes on a one-by-one basis.
3] Resolve
After analysis is complete, after seeing all the classes, the resolve phase comes into the picture. Here it looks into everything again but with the larger picture. So when it looks at the component, it understands what module it belongs to. And through this it can make more global decisions & optimisations based on that. Also surface the errors related to the structure of the application.
4] Type-checking
This step is mostly for validations. It asks TypeScript to check on any errors in the program, the errors in the Angular templates. And this is done via code generation.
5] Emit
During this phase, the TS code goes through a series of transformations. And it merges down the line as downlevel JavaScript(JS) code that is ready to run in the browser. In this step, as it’s emitting JS code for each class, it’s also adding to it any of the imperative Angular code that we are generating if that class needs it. So we’re adding all the template functions to the components and other things like that.
This is most expensive step in compilation — translating TS code to JS.
These five phases describe at a high level what happens every time we invoke the Angular compiler. But every Angular application actually depends on running the compiler not just once but many times.
In the next article we will see about a ‘Compilation Model’ in brief.
Thanks for reading. Stay tuned !
