What is IVY In Angular

Posted By : Chandan Gupta | 31-May-2021

Features of IVY in Angular 8
 

Lazy-loaded components

Libraries which are only used by with lazy-loaded component are even bundled in lazy-loaded chunks.


Improvements to Differential Loading
 

In Angular v 9, an ES2015+ bundle is output first. That bundle comes from the bundle.


AOT Compilation Everywhere

As we can see in the past section the AOT compilation was slower than JIT compilation so JIT was used for development. From the time to time build and rebuild the things improvements in Ivy, AOT-compilation now has a great developer experience. When we used JIT in some situations of our process and only AOT compilation in the final build, errors were detected only when doing production builds or worse, at runtime.


Bundle Sizes

Ivy can enable smaller bundles from the size,  and it uses the Ivy information Set which is a set of tree-shakable runtime rendering process methods. The angular bundles will inculcate only the rendering instructions that we use in our projects. However, the difference in our bundle b/w View Engine and Ivy engine will vary based on the size of our app and 3rd party libraries we have used. 

Meanwhile, a combined bundle size decrease for big applications but could mean an overall increase in bundle size for medium-sized applications. In both cases, the main bundle’s size will maybe probably increased and which is bad for the initial page load time.


Globalization

number formatting, date formatting, and other regional settings which we are known as Locales can be dynamically loaded at runtime instead of having to be registered at compile time.

 

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

 

Enable Angular Ivy

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

Enable Ivy in an existing project

Having an existing Angular (8.1.x) project run:

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

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

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

 

{
   "compilerOptions": { ... },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}
New project with Ivy
To start a new project with Ivy run:
$ new my-app --enable-ivy

 

To disable Ivy:

  • in angular.json set "aot": false;

  • in tsconfig.app.json file their remove the angularCompilerOptions option or set "enableIvy": false value.

 

Opting out of Ivy in version 9

In version 9, Ivy is the default. you can choose to opt-out of Ivy and continue using the previous compiler, View Engine.

The enable Ivy flag is set to true by default and as of v9.

here is example of set the enableIvy option to false in order to opt-out of Ivy.

 

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

 

Conclusion:

The future of Angular and IVY looks cool and important with some of the best features that Angular comes up with every new version.  Ivy is a very important key stepping stone in Angular framework history. It changes how the framework works start, without changing how we write Angular applications and it also sets the ground for Angular Elements to become much more popular in our Angular applications.

About Author

Author Image
Chandan Gupta

Chandan is a Frontend Developer with good experience in his domain. He Believes in smart work and loves to play with codes. He is good in programming.

Request for Proposal

Name is required

Comment is required

Sending message..