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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.