One of the biggest enhancement to the Angular framework in recent history comes with Angular Ivy, which was introduced with Angular 9. Built to drive improvements in performance, deliver a smaller bundle size, & ease the development experience, Ivy now serves as the default rendering engine for Angular. Whether you are migrating from an earlier version or you are new to Angular, understanding Ivy’s core features &  benefits will greatly improve how you are building applications in this modern era of web application and Progressive web applications.

This blog breaks down what exactly Ivy is, why it matters, & how it impacts applications & developers.

What Is Angular Ivy?

Ivy is the new compilation & rendering engine of Angular applications. In general, it does essentially the work of turning your Angular code into as efficient JavaScript as possible, which browsers can interpretate & execute. Before Ivy, Angular used the View Engine to perform this functionality. With Ivy’s new approach, many improvements in terms of both performance, flexibility, & ease of use emerged.

Why Was Ivy Introduced?

The Angular team in development created Ivy to solve some problems that developers were facing with older View Engines such as

• Bundle Size: In the initial versions of Angular, the application would generate JavaScript bundles too huge footprints, which resulted in too slow load times. Ivy dramatically reduces the size of the bundles since it only generates code for the components & services actually used in an application.
• More effective tree shaking: Ivy is now better in terms of tree-shaking capabilities, which ensures unused or redundant code removal in the build process. Thus, applications now come out as cleaner, smaller bundles.
• Better Debugging: Ivy offers better error messages, and errors that plugins like ‘ngTemplateGuard’ catch are detected at the template level, thereby helping developers to debug issues more rapidly & efficiently.
• Rapid Compiling: Ivy compiles much faster, thereby significantly reducing build times, but reloads are faster upon saving.

Key Features of Angular Ivy

The following are some major features that distinguish Ivy, making it a game-changer in many ways:

• Local Compilation: Unlike the previous View Engine, Ivy functions on the basis of “local compilation,” where each Angular component is compiled separately. A modular approach does make the builds more efficient: only parts of your code need to be recompiled when things changed. This leads also to smaller bundle sizes and faster execution.
• AOT (Ahead-of-Time) Compilation by Default: Angular Ivy has AOT by default, meaning it compiles your templates & components into JavaScript code at build time. This improves runtime performance & enables better startup times. This can be very useful for large applications in cases where speed of startup can truly become a pain.
• Dependency Injection Improved: Ivy helps to enrich the dependency injection system of Angular with much power and flexibility. It allows better scoping of services & providers, making the code cleaner as well as more efficient.
• More Precise Template Type Checking: Probably, one of the most appreciated features in Angular Ivy is improved template type checking. It can be detected much better errors than Angular templates by figuring out where the variable is used, thus error detection occurs much earlier during development.
• Incremental DOM: Angular Ivy introduces an incremental DOM approach, where the updates of the DOM only happen when it is necessary. Contrary to full regenerating of the complete DOM tree, Ivy only re-renders those parts of the view that have been changed. As a consequence, there is better and faster rendering and also more effective memory usage, thus overall application performance.

Benefits of Ivy

Here’s why developers should be excited about Angular Ivy:

• Smaller Bundle Size: Since Ivy only generates code for parts of your application that are actually used, it will reduce the size of your bundles. This can be especially handy for mobile and low-bandwidth users, whose experience may be much improved by quicker downloads and faster app loading times.
• Easier Debugging: Due to better error messages, it is much easier to debug applications with Ivy. Developers will now be able to find and correct problems more easily.
•  Smoother Application Flow: The tree-shaking, AOT, and incremental DOM approach together bring quicker app executions and more responsive user interfaces. Applications become snappier, and there is less waiting time for a user.
• Backward Compatibility: The changes are radical but Ivy is fully back compatible with all existing Angular projects. If you upgrade your Angular from 8 or earlier, your application should be completely working just after migrating into Angular 9 or above, using the Ivy engine by default.
• Future-Proofing: It paves the way for some of the further upgrades to Angular in the near future, like better ability of some specific features, for example, better lazy loading and faster server-side rendering. So, if you get on the Ivy train right now, your Angular applications will be ready for the next level of improvements.

Ivy in Angular 15: No More ‘enableIvy’

By Angular 15, Ivy has become a full production replacement, & you no longer need to set up the ‘enableIvy’ flag in the ‘tsconfig.json’. In reality, it’s been removed entirely. From Angular 15 and later, the sole rendering engine available for developers to use is ivy. It makes it very easy to set up projects and you can be sure to use the newest and most efficient version of Angular’s compilation and rendering engine straight away.

Prior to Angular 15

In earlier versions of Angular, you had to explicitly enable Ivy by configuring it in your `tsconfig.json` file. Here’s how it looked:

Example: ‘tsconfig.json’ (Angular 9-14)

Here, the “enableIvy”: true flag was necessary to enable the Ivy rendering engine in Angular versions 9 to 14. If you wanted to disable Ivy for any reason, you could set it to ‘false’.

From Angular 15 Onwards

Starting from Angular 15 Ivy is fully integrated as the default and only rendering engine. There’s no need to include the ‘enableIvy’ option in ‘tsconfig.json’ because it has been completely removed. This simplifies your project setup.

As you can see, there’s no need for enableIvy anymore. Everything is automatically handled by the framework, ensuring that the Ivy engine is always in use and set up properly.

How Ivy affects your workflow

For most developers, Ivy requires hardly any extra setup and learning. If you upgrade from one of the earlier versions of Angular, Ivy is turned on for you in Angular 9+. You may see your app building a little quicker and overall the bundle size can be smaller, but how you write your Angular code remains exactly the same.

There’s more of course, so here are some tips to get the most out of Ivy:

• Get the latest Angular versions: For Ivy, you should be working with Angular versions 9+. To update an existing project, see the updating guide for Angular from the link above.
• Tree Shaking: Using Ivy, you can use full tree-shaking capabilities by just making sure that you do not import libraries or modules not actually needed within your projects.
• Lazy Loading: Ivy combined with lazy loading enables you to split your application into smaller, load-on-demand modules. This can further minimize initial load times for your users.

Conclusion

As it promised to reduce bundle sizes, improve performance, and simplify development processes, Angular Ivy is about to revolutionize the world of Angular developers. No matter if you build a small application or scale up to a large enterprise solution, any improvements provided by Ivy can prove to have a major impact on the efficiency and performance of your apps.

Once you have the clarity of what Angular Ivy is and its features as major benefits, then you will be able to build faster, more efficient, and future-proof Angular applications.

Do feel free to Contact Us or Schedule a Call to discuss any of your projects

Author : Ms. Sonal Thacker