Angular [IVY] – A Detailed Walk through Ivy Compiler for Angular Development

Rapid compilation

Based on the locality principal, Ivy compiles one file at a time. It overlooks dependencies and interacts only with a component and template. This simplifies the process and enhances the compilation speed.

Enablement of AOT by default

Ivy with its new features is designed to enhance the performance of compiler.

With the previous render engine, AOT failed to compile to JIT so template code could not transcribe. However, with the locality principle of Ivy, the process of shipping AOT to JIT has been simplified through the NPM registry. This enables equaling AOT with JIT. It leads to a faster Ahead of Time builds an extension we can also use for dev-mode builds. It also removes the need for entryComponents.

Meta programming

Ivy helps you unlock new potential features such as higher-order components or Meta programming. Besides, you can generate dynamic lazy load components, modules, pipe, and new change detection without the dependencies upon zone.js.

Smaller bundles

Ivy ensures you don’t include anything that is not needed for the project development. So, you can use things more efficiently with tree-shaking and essential piece of codes. With Ivy, you can break down codes into smaller particles to be used for automatic functions. As you use only the required codes for templates, tree-shaking can imbibe rendered code easily and enable faster load times. Larger apps, medium sized apps and even small benefit from tree-shaking that reduce bundle size.

Figure 4 decrease of bundle size in apps

Debugging

Ivy enables to see a more useful stack trace to check with the template instruction. Due to the simplicity of Ivy pipeline, template syntax can be set with breakpoints to find cryptic error messages. Ivy makes it simple to find the error in the line and accelerates the development process for Angular Developers.

Overall, Ivy enables us to build faster applications with human readable code, simpler pipeline and easy-to-debug code.

[ Also Read : Angular Services – The Most Important Concepts To Learn Angular Framework ]

Component harnesses

With Angular 9, if we want to use the UI library to expose components, directives, and pipes, it is better to employ component harnesses. It can be implemented through Angular CDK.

Component harnesses is highly recommended for unit tests and also for server-side tests without many dependencies upon DOM and data binding API.

Removal of entryComponents metadata

Ivy treats every component as an entry Component. With Angular 9, entryComponents metadata has been disapproved for NgModule. This is to be removed from the Angular 11.

Ivy Instruction set

As you use Ivy Instruction Set, it allows you to create View Engine Compatible NG-DOM or get to work on other templates engines. It is possible since it is more like a bytecode or an assembly library. However, the application of this feature is not yet finalized for Angular 10. So, avoid any dependency on it.

Experimental API

Angular development may work with some new low-level API members. They include ɵmarkDirty, ɵdetectChanges, and ɵrenderComponent. By applying them, we can solve complex applications. But, small theta precedes these APIs. It is a warning signal that prevents us from using them since they are not stable and under experiment.

It is better you do not use the feature for now.

We must update tsconfig.json to enable Ivy compiler the following way.

1. The compilerOptions key is the first to be updated.
2. tsconfig.json file may look as the same as “module”: “es2015”.
3. Change the value of the compiler from es2015 to esnext.
4. Add a new key named angularCompilerOptions to the file.
5. Add a value that prompts Angular to use the Ivy. The object is
{“enable Ivy”:true,“allowEmpty Codegen Files”: true }.

After the process, our tsconfig.json file would appear as the following.

Now, we must update our angular.json file. After this, we need to enable AOT by implementing the values the following manner.

Now, it is time to add a script to our package.json.

And lastly, we must execute npm install to enable this script. Once it is done, the total bundle size of the application will decrease since it is the Ivy model now.