How the Angular Compiler Works

The Angular Compiler is a tool and which we also call ngc. It is used for compile Angular applications and libraries. ngc is built on the TypeScript compiler also as called tsc and extends the process of compiling.

Angular’s compiler create a bridge between developer experience and run time performance. Angular users author applications against like an ergonomic, decorator-based API, and ngc translates this code into more efficient runtime instructions.

The @Component decorator replaced with static properties like (ɵfac and ɵcmp), which describe to the Angular runtime and implement rendering and change detection for its template.

Like this, ngc can be considered an extended TypeScript compiler it also knows how to “execute” Angular decorators, applying their effects to the decorated classes at build time.

ngc

Several important steps of ngc:

• Decorators of compile Angular, of components and its templates.
• We can apply TypeScript’s type-checking to component and its templates.
• Quickly Re-compile when any changes made by developer.

Compilation Flow

ngc is mostly used to compile TypeScript code. The main flow of Angular compilation proceeds as bellow:

• Create an instance of the TypeScript compiler, with some additional Angular functionality.
• Scan every file in the project for decorated classes, and build a model of which components, directives, pipes, NgModules, etc. need to be compiled.
• Make connections between decorated classes.
• Leverage TypeScript to type-check expressions in component templates.
• It compile the program, also generating extra Angular code for the every decorated class.

Step 1: Creating the TypeScript program

They combines the set of files that we can compiled, type information from dependencies, also we can used some compiler options.

Step 2: Individual Analysis

In analysis phase of compilation, ngc looks for classes with Angular decorators, and attempts to statically understand each decorator.

Step 3: Global Analysis

In this the compiler needs to understand how the various decorated types in the program relate to each other Before it can type-check or generate code. Its main goal is to understand the NgModule structure of the program.

NgModules

The compiler needs to know which directives, components, and pipes are used in each component’s template To type-check and generate code. Because Angular components not imported directly their dependencies. Angular components describe templates using HTML.

.d.ts metadata

In global analysis phase, the Angular compiler needs the compilation scope of NgModules of compilation. That this NgModules may import other NgModules from outside the compilation, from libraries or other dependencies. TypeScript learns about types from such dependencies by declaration files, that have extension .d.ts. Angular compiler uses d.ts declarations to send information about Angular types of those dependencies.

Step 4: Template Type-Checking

In ngc it is a reporting type errors of Angular templates. For example, if a template bind a value {{name.first}} but the name does not have a first property, then ngc can send this issue as a type error.

5: Emit

ngc understood the program as well as validated of no fatal errors. TypeScript’s compiler generate JavaScript code for the program. During this process, Angular decorators are stripped away and several static fields are added to the classes, with this generated Angular code ready to be written out into JavaScript.

Summary

Angular compiler of TypeScript’s compiler APIs is to deliver the correct and performant compilation of Angular templates and classes. Compiling Angular applications gives us a offer to desirable developer experience in IDE, it give build-time feedback about issues of the code, and it transform the code during the build process into the JavaScript to run on the browser.