What is Angular Ivy: Next-Generation Compilation and Rendering Pipeline

Ankur Akvaliya

CO-CTO

Published On: December 30, 2022

Since the launch of the Angular 9+ version, the performance of the Angular runtime is quite good but the loading time is longer because of the large file size which affects the overall performance of the application.

So the question arises in the mind: Is there any specific solution to get rid of it? Yes, Angular IVY is the one-stop solution that takes the responsibility to make your application faster and smaller. But what exactly does this new technology do? Let’s start by understanding the basic definition of Angular Ivy.

What is Angular Ivy?

Before we start to understand the concept of the Angular framework, let’s first understand what is Angular. Angular is one of the leading frameworks that help you to design and build robust web applications for your business needs.

Ivy is a complete redrafting of Angular’s rendering engine. In simple words, we can refer to it as a fourth rewrite of the engine and the third since the launch of the Angular 2 version. But if I talk about what is Angular IVY, Ivy in Angular is one parameter solely responsible for considerably improving your web application.

The primary goal of Angular Ivy is to compile components more independently of each other quickly. So, it will aid the developers working with AngularJS development company in efficiently improving development times since recompiling an application will only involve compiling the changed components.

Ivy compiler also has been more concentrated on the concept of tree-shaking. If we talk about tree-shaking, it’s a process where the TypeScript compiler looks at your code, identifies the list of needed libraries, and, most importantly, eliminates any unused code.

9 Essential Features of Angular Ivy

After having a look at the basic concept of Angular Ivy, it’s time to explore its features of Ivy Angular in detail.

1. Lazy-Loaded Components

   Angular Ivy makes it pretty easy for developers to implement lazy load components in Angular development. The excellent part about Angular Ivy is that the developers can easily create lazy load components without requiring a NgModule.

   Angular Ivy will typically reduce the number of components that are specifically required for an application to load. In addition, once the developers implement lazy loading patterns in the application, your application’s initial bundle sizes become smaller, which in turn helps decrease load times.

   Moreover, any Ivy component can be lazy-loaded and dynamically rendered. In simple words, the developers can easily opt for lazy loading and rendering a component without using routing or Angular modules.

   However, in practice, the developers typically make use of component render modules or feature render modules that help to link a component’s template to its declarable dependencies. Libraries that are only used by a lazy-loaded component are even bundled in lazy-loaded chunks.

2. Amendments to Differential Loading

   In Angular 9, the build process usually runs once specifically for the ES5 bundle and once for the ES2015+ bundle during the implementation of the differential loading. Whereas in the case of Angular 9+ versions, an ES2015+ bundle is an output first. That bundle is then transpired to a separate ES5 bundle.

3. AOT Compilation Everywhere

   AOT is enabled in application builds, the development server, and tests by default. However, if we talk about AOT compilation, it works significantly slower than JIT compilation, so JIT plays an essential role in application development and testing.

   By using AOT compilations, the developers have the freedom to quickly build and rebuild time improvement during the entire Angular application development.

   Suppose the developer uses JIT compilation in some phases of the project application and only AOT compilation in the last build. In that case, the chances of having errors to be evoked during the project build or worse, specifically at runtime.

4. Bundle Sizes

   As Angular Ivy utilizes an Instruction Set that is nothing but a set of tree-shakable runtime rendering instructions, the developers can efficiently enable smaller. In addition, such bundles will only be responsible for including the rendering instructions developers typically use in projects.

   It is the best option for Angular developers when they need to deal with the use cases like micro frontends, Angular Elements and web apps. In simple words, we can say that it works well when Angular is not controlling the entire document.

   And let’s talk about the fundamental difference in bundle sizes between View Engine and Ivy. It will vary based on the size of our application and the 3rd party libraries we use.

   Generally, we can say there will be a considerable decrease in bundle size, especially in the case of Small and simple applications.

   But on the other hand, there will be an increase in the main bundle for complex applications. And yes, a decrease in lazy loaded bundle sizes is recorded in the complex applications.

5. Globalization

   For locales like number formatting, date formatting, and other regional settings, the Angular developers usually perform dynamically loaded at runtime instead of having to be registered at compile time.

   Copy

   // main.ts 
   import '@angular/localize/init';
   
   import { loadTranslations } from '@angular/localize';
   
   loadTranslations({
     '8374172394781134519': 'Good Morning, {$username}! You’re Welcome to {$appName}.',
   }
   );
   

6. Compile-Time Inlining

   In Angular 8, a localized application will only be compiled by the developers once. So, rather than dealing with multiple builds to produce a bundle per language, a bundle per language is developed by simply replacing $ localize placeholders with translated texts.

   Once done, the developers can move ahead to add the package @angular/localize to support localization (multiple languages).

   The excellent part about this feature is that the developers no longer have to include Angular’s localization code in the bundles if they only have a single language. If we don’t use localized templates, the i18n* Ivy instructions are tree-shaked from the bundle.

   Related Post: angular route resolver

7. Additional Provider Scopes

   The applications developed with the Angular framework always include the Angular module scope for providers.

   With the launch of Angular version 6, a concept like ‘root’ provider scope and tree-shakable providers for root and Angular module scope providers came into action. In addition, Angular version 9 introduces the ‘platform’ and ‘any’ provider scopes.

   The Angular developers can quickly utilize Platform-scoped providers that can be shared between multiple Angular applications in the same document. The ‘any’ provider scope will share a provider per module injector.

8. Improved Developer Experience

   Ivy plays a vital role in improving the working experience of the Angular developers. It typically enables the Angular Language Service to support additional checks while developing. Till now, it is considered to be the biggest improvement to the developer experience.

   • File Path Checks

   All the component stylesheets and template paths are regularly verified by the Angular Language Service to provide the best developer experience. The developers can efficiently design and build robust web applications using proper file path checks.

   • Template Type Checks

   Templates are type-checked, meaning member names and types are usually verified, even in embedded views. As a result, the runtime errors are now detected easily while developing and building.

   Moreover, it doesn’t seem to have added the same options as if we would set “strict”: true in the compilerOptions object. It becomes essential to compare the Angular workspace strict option with the TypeScript compiler strict option.

   • Strict Template Type Checking

   Since Angular version 5, the developers have an option to enable template type checking s by setting “fullTemplateTypeCheck”: true in the angularCompilerOptions object.

   Ivy comes up with strict template type checking. When this new Angular compiler option is set, the value offullTemplateTypeCheck is ignored.

   Copy

   {
     "//": "tsconfig.json",
     "angularCompilerOptions": {
       "strictTemplates": true
     }
   }
   

   The principle of strict template type checking is verifying the types of property bindings and respecting the strictNullChecks option. It also checks the types of template references to directives and components, including generic types.

   Template context variables’ types are also being verified, which is excellent for NgFor loops. The $event type is checked for event bindings and animations. The type of native DOM elements is verified with strict template type checking.

9. Improved Styling Experience

   The community has performed a complete reworking of the styling in Angular Ivy. The combination of static HTML classes with NgStyle and NgClass directives is now fully supported with the invention of Angular Ivy.

   As part of the Ivy styling rewrite, binding CSS Custom Properties is now supported. CSS Custom Properties have a scope, so this CSS property would be scoped to the component’s DOM.

Top 6 Advantages of Using Angular Ivy Compiler

1. Smaller Apps

   As compared to ViewEngine, Angular Ivy is much more efficient. For each component in Angular, the developers typically use less code to generate applications since the compiler removes the unused parts of Angular.

   Moreover, it brings a significant impact on the web application size. For example, the difference in bundle size between Angular 9+ apps and post versions of Angular 9 apps is almost 40%.

   It’s a big deal since the app size is one of the main drawbacks of Angular compared to other libraries like React and Vue. Also, the drop in bundle sizes improves the overall performance of the apps you build.

2. Efficient Testing

   With the implementation of Ivy, the developers and users can quickly expect a 40-50% boost in test speeds of web applications. It is made possible with the help of TestBed, which has been completely revamped and is now much more efficient.

   So the developers become free from recompiling all components during each test cycle. The primary role of TestBed in Ivy is to avoid recompilation between tests unless a component has been manually overridden.

3. Debugging Tools

   Application debugging becomes much easier for developers. And it is made possible by utilizing Angular Ivy for application development.

   For example, the developers use the new ng object for debugging while running an application in Development Mode. This will help the Angular developers gain access to instances of your components, directives, etc.

4. Enhanced Handling of Styles and Style Merging

   The handling of styles has been dramatically improved in Ivy. Usually, if there were two competing definitions for a style, those styles would destructively replace each other. Now they are just merged predictably.

   In Ivy, bindings do not depend on the timing of changes to these expressions; instead, there is a clear, consistent order of precedence, with the most specific style having the highest importance. For example, a binding to [style.color] overrides a conflicting binding to [style].

5. Lazy Loading

   Angular Ivy is solely responsible for any component to be lazy-loaded and dynamically rendered. Components can be lazy-loaded and rendered without Angular modules or routing.

   Moreover, the libraries that are utilized by a lazy-loaded component are bundled into lazy-loaded chunks.

6. AOT Compilation

   The AOT Compiler has seen a great deal of improvement because of Ivy’s new architecture. Till Angular 8, JIT compilation was preferred the preferred compiler since AOT was too slow.

   Now in Ivy AOT is the default compiler thanks to the huge improvements in build and rebuild times.

How To Enable Angular Ivy?

Ivy can be enabled in an existing project with the latest Angular version but also directly scaffold a project with Ivy.

Enable Ivy in an existing project

Having an existing Angular project run:

$ ng update @angular/cli@next @angular/core@next 

Both the Angular core and the CLI will be updated at the latest release candidate. One interesting thing to notice is the “aot”: true in the angular.json workspace configuration file:

AOT compilation with Ivy is faster and should be used by default.

Then add the angular compiler options in the tsconfig.app.json:

{
   "compilerOptions": { ... },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

Generating new project with Ivy
To start a new project with Ivy run:

$ new my-angular-app --enable-ivy

How To Disable Angular Ivy?

To disable Ivy:
In angular.json set “aot”: false;
in tsconfig.app.json remove the angularCompilerOptions option or set “enableIvy”: false.

Conclusion

I hope you got a clear idea of the concept of what is Ivy in Angular and how Ivy Angular help your build robust web applications for your business needs.

Angular’s future is entirely dependent on IVY that comes up with incredible features that Angular with every new version. In Angular 11+, Ivy completely takes over the compiler (Ivy Angular compatibility compiler) and provides a stronger core structure than ever.

Ivy is a very important stepping stone in Angular history. It changes how the framework internally works, without changing Angular web app development and it also sets the ground for Angular Elements to become much more popular in our Angular applications.