A compiler is nothing but a part of code that converts one programming language to another. If we talk about some simple programming languages like C, C++, the compiler needs to convert the program from C to byte code. Machines do not know languages like C or Java. They only understand the language of bytes. That is why we require to convert code from one language to another, though they do not understand byte code. They understand basic languages such as HTML, CSS, or JavaScript. They can’t comprehend high-level languages like SASS, SCSS. These languages require to be converted into HTML, CSS, or JavaScript.

An Angular application consists of components, HTML code, and their templates, provided by Angular to increase productivity so you can make an app more quickly with high performance. Different types of browsers do not know the language of templates and components. So, what we require here is to convert from a template to a JavaScript program. Thus, we need a compiler.

Angular has two types of compiler.

The just-in-time compiler does the compilation process at the time of translation.

You can run(host) the program at the localhost with the following command:

 

ng serve 

 

If you have to host it, then you need to make a build of it.

You can create or build with this type of the following command:

 

ng build --prods

 

prod allows the application to take the configuration of the production level that has been configured in the Angular applications. Angular checks the syntax and some more functions of the Angular program and adds the angular compiler, which can translate in a program from component to actual JavaScript.

The angular compiler build gets extremely, and it takes more time to download the program in the browsers.

According to download, Angular compiles the program, which also takes some time to translate from component to JavaScript. This affects in translation time of the application in the browsers.

Having extra parameters in command for JIT compiler, you need not make extra efforts for the AOT compiler.

If you have to host local, write the following command:

 

ng serve --aot

 

If you have to make a build to host it somewhere like AWS, write the following command:

 

ng build --prod --aot

 

The Angular AOT compiler extracts the metadata to interpret the Angular application in the same JavaScript code. It identifies the code based on decorators like @Component, @Input, @Output, @ViewChild, @Pipe, etc.

Example: App.component.ts

 

import {Component} from '@angular/core';
@Component ({
 selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
 title = 'App component';
  @Input() testInput;
}

 

app/src/app.component.ts

As you can see, in the above example we have two decorators: @Component and @Input.

The Angular compiler treats both decorators differently and produces a factory for components.

The Angular AOT Compiler compiles it in 3 phases:

 

Code Analysis

The Typescript compiler performs some crucial analytic work in the first phase. Later, it emits .d.ts file required for AOT compiler to generate application code. At the same time, AOT Collector collects the metadata and analyzes it that recorded in Angular decorators like @Component, @NgModule, @Directive, @Pipe.

The AOT compiler only knows a subset of JavaScript. It does not know the perfect JavaScript syntax. Assume you want to create your provider for a service, and you want to write the program as below.

 

@Component ({
 ...
 providers: [{provide: server, useFactory: () => new Server()}]
})

 

app/src/app.component.ts

In this example, the provided keyword accepts an Injection token that should be different, and the used Factory accepts a function that returns an instance of a service.

 

export function serverFactory() {
  return new Server();
}
@Component ({
...
 providers: [{provide: server, useFactory: serverFactory}]
})

 

app/src/app.component.ts

The Angular compiler also does not support the function or keyword thats not being exported. In the program above, you can see we have the same function that returning an example of server and function is getting emission.

The AOT compiler supports most of the syntax from JavaScript but not all of these. These are some of the syntaxes following below:

 

Code Generation

The code compiler only collects the code and gives the proper output in the. metadata. JSON. It does not translate the JavaScript code. this work gets done. The compiler does the work of code generation and throws an error if there are any semantic errors.

The variable used in the HTML templates should be public in the TS file. Assume we’re done used @Input for a data binding in the ts file, so it should be public.

 

import {Component} from '@angular/core';
@Component ({
selector: 'app-root',
templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss'],
})
export class AppComponent {
 title = 'App component';
}

 

app/src/app.component.ts

 

{{title}} 

 

app/src/app.component.ts

I have done and used the title variable to show it in the HTML files. I kept a keyword public. I did not mention the public keyword because the Typescript is set as public by default if no access specifier is mentioned.