Hey, readers in this blog I will tell you what is Angular ivy and why it is superb. So keep reading this blog and you will know what Angular ivy is
what is Angular ivy
Ivy is the name of the Angular new compilation and rendering pipeline. It releases with Angular version 9. Ivy is a completely new version of Agular previous rendering engine. Ivy provides a huge improvement in your application. With the help of Ivy, you can compile components independently.
Ivy also provides tree-shaking. It is the process TypeScrip compiler check your code and identify which library is needed. It helps to improve the load time of the application by eliminating unused code.
Looking for Angular Template?
Try best Angular Template and create stunning web applications for unlimited client projects and personal projects.
The main Goals of ivy
Ivy is a very important step in Angular development. it changes the entire framework internally. With the help of ivy compiler, the development process in Angular become very similar to (React)
Angular Ivy provide features such as
- It provides fast development time (with the help of incremental compiler)
- It unlocks the new feature like (lazy loading of the component instead of modules, higher-order components, and metaprogramming)
- Better build size (with a generated code easier with tree shaking)
The main advantage of Ivy is that you don’t have to change the way of writing code for your applications. It works as a switch to turn on for the projects.
To avoid breaking application when you on the Ivy, the Angular development team used migration scripts to analyze the code of your application and make it compatible for ivy if needs.
Major features of Angular Ivy
The principle of locality
In Ivy to compile a component Angular only needs information about the components except for the name and package. Ivy compiler doesn’t need metadata of any declarable dependencies for compilation
Ivy enables a smaller bundle because it uses the instruction sets. Ivy instructions are a set of tree-shakable rendering instructions.
This is great for micro frontends, angular elements, and web apps.
Small applications will see a less bundle size and complex applications will see size decrees in a lazy loaded bundle.
Multiple languages from a single application
To change the language, you have to restart the application. This means that you can support multiple languages with a single application bundle.
With Angular ivy, a local application will now only compile once it will not produce a bundle per language. Bundle per language generated by replacing $localize with translated text.
To support localization, you need to add package @angular/localize now with ivy you don’t have to add angular localization code in the bundle
Improved development experience
Ivy provides Angular language service to support additional checks while developing. This provides a better development experience.
So that’s all from my side I hope you understand what is Angular ivy and why it is superb. If you like this article then share it with your friends and if you have any confusion related to this post, please let me know in the comment section down below.