A Detailed Guide on Angular Engine Ivy

Table of Content

What is Ivy?

Angular Ivy is the latest compiler for angular application and also it is the pipeline of rendering and compilation of next generation. It’s highly advanced approach helps with benefits that were not available before. Being simple to use platform, it helps with incredible loading speed even in slow networks. Moreover, the bundle size is also reduced with its support. It was first obtainable in the Angular version 8 with Angular Ivy opt-in.

[Image Source]

Advantages of Ivy Engine in Angular

The main advantages of Ivy Engine in Angular is Below:

Concept of Ivy

Locality and tree shaking are two key characteristics that Ivy always examines. They both can create Ivy with complete capability. The process of independent compilation of each component with its instruction. The restricted changes are compiled in the process that makes the process faster by not changing all the project files.

Tree Shaking

Tree shaking simply means - separating unused code during the bundling process. This can be done by using tools like Roll up and uglify. During the build process, tree shaking tools use static analysis and remove the unused and difficult code. Although, tree shaking tools have control when the conditional code manage as static analysis depends on references. For instance, unused code path within a “While” statement may not be recognized by a static analyzer and that code still occupied in the bundle even if it is not used during runtime. Because of this control, the current rendering pipeline has got improved to optimize the bundle size.

Locality

The locality is the process of compiling every component independently with its local details that rebuilds quickly by compiling limited changes and not the whole project files. This expands the speed of your build process. In the current angular code, every component has its parent details, which guide to compilation dependencies, while in Ivy, every component is separate. Angular only require details of the component itself, like we can take the name and package name of its declarable dependencies in the tsconfig.json file. More importantly, Ivy does not require metadata of any declarable dependencies to compile a component. The concept of locality means that in common we will see speedy build times.

Runtime

The runtime engine is based on the concept of Incremental DOM. It’s a way to express and apply updates to DOM trees using information. DOM updates are the main part of change detection in Angular so this concept can be easily applied in the framework.

 In which the logic that components, makes DOM nodes, and runs change detection is executed as an atomic structure or unit him/her mention to as Angular Interpreter. A compiler simply makes metadata about a component and elements explain in its template. It’s the interpreter that does the main task. It uses this data to components and runs change detection.

How to Enable Ivy in Angular?

To enable the Ivy compiler in angular, we must update(improve) our tsconfig.json file.

Step-1: Here, we must improve the compilerOptions key. Our tsconfig.json file can be like this specific: “module”: “es2015”. Currently, we have to change the value of compiler options from es2015 to esnext in our project.

Step-2: Here, we require to attach a new key to this file.

The essential key must have the name angularCompilerOptions and we have to attach an object which is important in Angular to simply use the Ivy compiler: {“enableIvy”: true, “allowEmptyCodegenFiles”: true }.

After that, our changes in tsconfig.json file must look like the following.

{
  "compilerOptions": {
    "module": "esnext",
 
  },
  "angularCompilerOptions": {
    "enableIvy": true,
    "allowEmptyCodegenFiles": true
  }
}

In which the next step is to improve our angular.json file. To use Ivy compiler, we require to enable “aot” by making its value true as shown below.

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            ...
            "aot": true,
          }
        }
      }
    }
  }
}

In the last step, we have to attach a script to our package.json.

{
  "scripts": {
    ...
    "postinstall": "ivy-ngcc"
  }
}

At Last, we must install npm to run this script. Currently, when we serve or build our application, it will be in ivy mode. You must see a recognizable decrease in the total bundle size.

Bundle Sizes

Ivy can enable the smallest bundles maybe it uses the Ivy Information fix which is a set of tree-shakable runtime rendering information. Our bundles will single include the rendering information we use in our projects. This is great for use cases such as micro front ends, Angular Elements, and web apps where Angular is not controlling the whole document. although, the difference in our bundle sizes between View Engine and Ivy will modify the size of our application and the libraries we use in our application. In common:

This means the bundle size may decrease for big applications but it could also require an overall expansion in bundle size for intermediate applications. In both cases, the main bundle’s size will probably expand which is bad for the startup page load time.

Conclusion

In Angular 10 and Angular 11 versions, Ivy completely takes over the compiler (Angular Ivy compatibility compiler) and provides a better core structure than before. It modifies how the framework internally performs, without changing Angular web app development and it also sets the basics for Angular Elements to become much more admired in our Angular applications. Currently, Angular is using as a View Engine compiler to compile Angular applications.