Angular Compiler (Behind the Scenes)

Compilation is the basic process of converting your code to machine understandable code. Most of the languages takes help from their respective compiler. In this session, We are going to learn about the Angular Compiler. we will also learn about difference between .d.ts and .ts files and at last will learn about compiler features that it offers. So Let’s Start:

What is Angular Compiler?
Main task of Angular Compiler is to translate declarative code that we write to imperative code that browser understands. Basically, In angular we create components, bind data to it, and write lots of declarative syntax but it is by- default does not understand to browser, we need to make them understand by converting it. To do so, Angular uses two types of compilers:
1. Just in time compilation (JIT)
2. Ahead of Time compilation (AOT).

JIT (Just In Time)
Just in time compiler is used for development mode. When we write angular code, we not only write the typescript syntax but also integrate it with the angular ex. we add decorators to classes so that it can be identified as a angular feature. Now, when we build this application using JIT compiler, we are feeding this code to Typescript Compiler which at the end translate it to Java script. Now , Decorators which are written in angular code are directly bundled into the javascript files after compilation. When These decorators get executed in browser, they call to angular compiler and run-time get executed.

AOT(Ahead of time)
This is another type of compilation technique, which uses Angular Compiler instead of typescript compiler to compile the code. This compiler also do the same thing which Typescript compiler does, but it Pre-compiles the angular decorators and the features that we have written so that we can remove cost of compiling it at run time.

How Angular Compiler works?

Typescript compiler Architecture

As shown in above diagram, Typescript compiler follows 3 important steps for compiling typescript code into the javascript code.
1. Program Creation
2. Type Checking
3. Emit

Whereas Angular compiler is built, on top of this Typescript compiler. it Uses all the phases of typescript compiler but it also adds its own two important steps i.e Analysis and Resolution as shown in below diagram:

Angular Compiler Architecture

Let’s understand significance of each and every phase:

Program Creation:
This is very first step of compilation process. In which Typescript discovers all the files from your source code. This is important because typescript needs to understand all the files so that it can compile. This process of locating the files is starts from tsconfig.json file. In this, Typescript finds initial set of files of your program and again reads their imports so that it will again find their references. In this way again and again it discovers the typescript files from the application.

Analysis:
This is the second phase of compilation process and it is carried out by angular compiler as Angular adds this phase to compilation process. In this step angular takes full set of files from the program and looks for the classes that are defined. Then it tries to find out one’s which are decorated with the angular decorators. it does this just to understand what are the different parts of application, like components, directives, pipes, services etc. So if it is a component then it starts parsing it’s template files. This process is carried out just to understand features in isolation.

Resolution:
In this phase, it again looks into your application, but now in the context of larger picture. It tries to find out Modules in which components are referenced so that this information will help during optimization and to take better decisions.

Type Checking:
This is the second last step of program compilation in which Angular asks typescript to check for the errors into the code and also in the angular templates so that it can be tracked.

Emit:
This is the last and important step of compilation which converts typescript code so that browser can understand it. During this transmission compiler coverts classes to imperative code in which it also inserts angular snippets if it is needed.

Let’s Understand Difference between .d.ts files and .ts files:
When file whose extension is .ts gets compiled, It’s get converted into .js file which browser understands. This generated compiled files does not have type information of the original files. They just contain imperative code which is ready to execute in browser. So, who keeps this type information then? answer is files whose extension is .d.ts . when compiler compiles original files, it also creates .d.ts files so that it handles the shape of the types which are declared in the original file. Why it is so Important? Basically when we install new libraries from the NPM typescript needs to know their types so that it can be implemented correctly.

Compiler Features:
1. ngModule Scope.
2. Partial Evaluation.

ngModule Scope:
When we use angular components we also connects/links them so that it will help us for the communication between them.

App Component having reference of home component

As discussed we have linked now home component to app component using @Input signature, during the compilation.

1. it becomes very difficult for compiler to find out component class which is associated with <app-home> element.
2. Reason behind this is we never add import for this component.
3. So, with the help of modules in the angular we can sort out this problem.
4. During compilation step, all the components which are declared in the module are called and relatively association of the component class takes place.
5. Now, It becomes very difficult if home component is declared into another module named home Module which is then exported so that it can be used in main module as shown in below diagram:

Two modules connection in Angular

1. As you can see, Home component is exported from Home Module (known as Export scope ) and this module is imported into the App Module.
2. Now during compilation of app component, it considers all the components which are declared in its scope (Compilation scope) and also the exported elements of the imported module (export scope).
3. In this way compiler able to figure out that app-home is only be a reference of Home component which we received from the export scope and it compiles it.

This is optimization that compiler does to help tree shaker. very soon I will post story about Tree shaker.

Partial Evaluation:
Angular compiler contains Typescript interpreters so that during build time it should know actual values of certain expressions that we have written into the angular decorators.

App Module having dynamic declarations array

so as shown in above image, compiler needs to understand reference of component array which is declared in somewhere in the code. For this compiler runs typescript code written in decorators and determine the value of the declarations array. So in this way even components declared in the another file we can import it and use it. Thanks to partial evaluation as it detects the import and references the values.

In this way, Angular compiler works under the hood.

Please share your thoughts on this article…