March 16, 2020 By Mitul Patel Category: Full Stack

A Detailed Walk through Ivy Compiler for Angular Development

With Angular 9, we can leverage Ivy as a default rendering engine. The Google development team is now anticipating that Angular 10 may also include Ivy artifacts. As a fact, Ivy compiler allows for rapid compilation, increased debugging and smaller bundles. To make the  most  of the  robust  Angular development services ,  you must also focus on this component for modern applications.

Ivy Compiler Engine: What is it?

For Angular development, it is important to write components in TypeScript and template in HTML. But, the browser does not comprehend HTML. The conversion of HTML into JavaScript helps the browser consume HTML. We can do it using a compiler. It is executed by the view engine and finally, we get the appropriate DOM. The process has been in use since long.

Figure 1 View Engine shows the compilation of HTML and JS

But, with Angular 9, the need for the HTML interpretation is no longer applicable. It is easier now to create a set of instructions for templates and build the correct DOM instantly. It helps you save time and effort too for the development. This is where Ivy has jumped in and simplified the process of application development

Figure 2 Ivy rendering pipeline

What Can You Achieve With Ivy?

As described by the Google team, Ivy presents us with lots of features which are subsequently going to reduce time to develop and also production costs.

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 ]

Angular Ivy Features for UI Libraries

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.

Service Libraries of Angular Ivy

We can get additional provider scopes through service libraries integral to Angular 9. It  simplifies the addition of providers to ‘any’ and ‘platform’ to scopes.

In addition, TestBed.inject is a new test library replacing TestBed.get.

So far, we have discussed Ivy and its features. Now, let’s take a look at how we can enable Ivy compiler for your next Angular development project.

Enabling Ivy Compiler

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.

The Take Away

Ivy compiler is indeed an essential feature of the Angular development service as it improves the loading performance and development speed of your application development. Bytes Technolab makes the better use of Ivy so as to help you build faster and scalable Angular projects. For any development queries, you can get in touch with us.

Share with :

Total Ratings 3.5/5 (4)

Rate Us!

Thanks For Rating Us