A simple guide on AOT Compilation in Angular


Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

 
 

What is a Compiler?

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.

What are the types of Compiler in Angular?

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.

  1. Just-in-Time (JIT)
  2. Ahead-of-Time (AOT)

What is Just-in-Time Compiler (JIT)?

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 --prod

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.

The Ahead-of-Time (AOT) Compiler in Angular

  1. We can decrease the size of the build and compile it at the time of the build. This means the application can be quickly downloaded by the browser and does not need to spend the time to compile the program.
  2. AOT compiles the program at the building level so the browser doesnt need to spend the time to compile it. The program is beginning to be compiled, and Angular doesnt add a compiler into the build. This helps to decrease the size of the build or creation.

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

What are the Advantages of AOT Compilation in Angular?

  1. Faster translation of your Angular application: With AOT, the code is compiled during the build process. so, the browser loads executable code that is ready to be rendered immediately. Very quick!
  2. Small Angular application size: There is no need to download the Angular compiler since then the application is already compiled. If the compilation is to happen in the browser at runtime like in JIT, the Angular application is sent together with an Angular compiler. The compiler is approx. half the size of Angular itself.
  3. Better code feature: This is because template errors are to find out early as the application compiles as part of the build process.
  4. More secure and robust applications are: That’s because the HTML templates and TypeScript components are not evaluated dynamically at runtime(simultaneously) in the browser. This leads to fewer chances for injection attacks.


What are the disadvantages of AOT Compilation in Angular?

  1. AOT only works only with HTML and CSS and not for other file types. If necessary other file types that time, we will need to follow the previous build step.
  2. We require to maintain the AOT version of the bootstrap file.
  3. We require cleanup steps before compiling.

How AOT Works?

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:

  1. Code analysis
  2. Code generation
  3. Template type checking


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:

  1. Literal object ({key1:value1, key2:value2}), example (1: ‘ifour’)
  2. Literal Array ([item1, item2, item3]), example ([11,12,13])
  3. Null, example ()
  4. Conditional operator (expression? value1:value2), example (a


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.html

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.


One-stop oplossing voor Angular-webontwikkeling ?

Uw zoekopdracht eindigt hier.



Template Type Checking

The compiler checks out the template type. It checks the variable and function in the typescript file that you are used in the HTML template to display or to apply the condition.

Assume you have used an isEvent () function in the HTML template to check whether the number is even or odd in the application. The AOT compiler verifies it in typescript, and if it is not current, then it simply throws an error like isEvent is not a function.

import {Component} from '@angular/core';

@Component ({
 selector: 'app-root',
 template:'Even number',
 styleUrls: ['./app.component.scss'],
})
export class AppComponent {
 title = 'App component';

app/src/app.component.ts

I have used the function isEven but have not mentioned it in typescript. Although the AOT compiler will throw the error.

After these phases, the AOT compiler completes its work and makes a build if everything is written, otherwise, it throws the error.

Although the Angular AOT compiler checked all the conditions and interpreted them at the time of build, it does not add the compiler into the build, which helps to make the build a smaller Program.

Conclusion

To sum up, this blog will help you comprehend the AOT concept, and how to work with AOT more clearly. At last, AOT provides an effective way of compiling your Angular code for production that leads to robust, secure, and learning applications.

A simple guide on AOT Compilation in Angular

What is a Compiler?

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.

What are the types of Compiler in Angular?

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.

  1. Just-in-Time (JIT)
  2. Ahead-of-Time (AOT)

What is Just-in-Time Compiler (JIT)?

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 --prod

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.

The Ahead-of-Time (AOT) Compiler in Angular

  1. We can decrease the size of the build and compile it at the time of the build. This means the application can be quickly downloaded by the browser and does not need to spend the time to compile the program.
  2. AOT compiles the program at the building level so the browser doesnt need to spend the time to compile it. The program is beginning to be compiled, and Angular doesnt add a compiler into the build. This helps to decrease the size of the build or creation.

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

What are the Advantages of AOT Compilation in Angular?

  1. Faster translation of your Angular application: With AOT, the code is compiled during the build process. so, the browser loads executable code that is ready to be rendered immediately. Very quick!
  2. Small Angular application size: There is no need to download the Angular compiler since then the application is already compiled. If the compilation is to happen in the browser at runtime like in JIT, the Angular application is sent together with an Angular compiler. The compiler is approx. half the size of Angular itself.
  3. Better code feature: This is because template errors are to find out early as the application compiles as part of the build process.
  4. More secure and robust applications are: That’s because the HTML templates and TypeScript components are not evaluated dynamically at runtime(simultaneously) in the browser. This leads to fewer chances for injection attacks.


What are the disadvantages of AOT Compilation in Angular?

  1. AOT only works only with HTML and CSS and not for other file types. If necessary other file types that time, we will need to follow the previous build step.
  2. We require to maintain the AOT version of the bootstrap file.
  3. We require cleanup steps before compiling.

How AOT Works?

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:

  1. Code analysis
  2. Code generation
  3. Template type checking


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:

  1. Literal object ({key1:value1, key2:value2}), example (1: ‘ifour’)
  2. Literal Array ([item1, item2, item3]), example ([11,12,13])
  3. Null, example ()
  4. Conditional operator (expression? value1:value2), example (a


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.html

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.


One-stop oplossing voor Angular-webontwikkeling ?

Uw zoekopdracht eindigt hier.



Template Type Checking

The compiler checks out the template type. It checks the variable and function in the typescript file that you are used in the HTML template to display or to apply the condition.

Assume you have used an isEvent () function in the HTML template to check whether the number is even or odd in the application. The AOT compiler verifies it in typescript, and if it is not current, then it simply throws an error like isEvent is not a function.

import {Component} from '@angular/core';

@Component ({
 selector: 'app-root',
 template:'Even number',
 styleUrls: ['./app.component.scss'],
})
export class AppComponent {
 title = 'App component';

app/src/app.component.ts

I have used the function isEven but have not mentioned it in typescript. Although the AOT compiler will throw the error.

After these phases, the AOT compiler completes its work and makes a build if everything is written, otherwise, it throws the error.

Although the Angular AOT compiler checked all the conditions and interpreted them at the time of build, it does not add the compiler into the build, which helps to make the build a smaller Program.

Conclusion

To sum up, this blog will help you comprehend the AOT concept, and how to work with AOT more clearly. At last, AOT provides an effective way of compiling your Angular code for production that leads to robust, secure, and learning applications.

  • Pin It
TOP