The way that IVY reduces the app bundle size is by removing the parts of Angular that aren’t being used, which is done by Tree Shaking as well as by generating less code for each Angular component.
With these improvements, small apps and large apps can see the most dramatic size savings.
Improved template type-checking
In version 8 we had two modes of type checking, basic mode, and full mode. We can select different modes in angularCompilerOptions in tsconfig file by setting the flag fullTemplateTypeCheck to true for full mode and false for basic mode.
fullTemplateTypeCheck
— Activating this flag tells the compiler to check everything within your template (ngIf, ngFor, ng-template, etc)
Angular 9 introduces the new mode of type-checking the ‘strict mode’. Strict mode is a superset of full mode and is accessed by setting the strictTemplates flag to true.
To learn more about template type-checking options, see the Template type checking guide in the documentation.
Improved build errors
The other good thing that comes with version 9, is that they made the error messages more understandable and readable.
In version 8 or View Engine, a typical compiler error would look like the following:
In version 9 with Ivy, the same error looks like:
Angular 8vs9 bundle size and speed test
Let’s compare now the Angular version 8 with the latest release version 9. For this, I have generated a new project with Angular CLI.
ng new angular8vs9
Comparing the chunk size:
Angular 8: ng serve
Angular 9: ng serve
Comparing the load speed in the browser:
Angular 8:
Angular 9:
As you can see there is a significant difference between Angular 8 View-Engine and Angular 9 IVY, around 40% smaller and faster. This was just a starter project, the larger projects benefit most from this.
Update Angular to version 9
It is recommended first to update to the final release of Angular 8 to have the best update experience. For more details and guidance visit update.angular.io
Update to the latest version of Angular 8:
ng update @angular/cli@8 @angular/core@8
Update to Angular 9:
ng update @angular/cli @angular/core
Notes
To review all changes with this update, including deprecated APIs, see
in the Angular documentation.
AOT (Ahead-of-Time) compiler is enabled by default in version 9.
Support for typescript 3.4, 3.5 deprecated. Now supports typescript 3.6
If you are using AngularJS, you can directly upgrade to Angular 9. There is no need or knowledge requirement from older versions.
Final thoughts
It looks like we have a lot to look forward to with Angular v9. With IVY compiler now it opens the way for further improvements and even smaller bundle sizes and faster build times. I’m really excited about the future of Angular, what good things will come. Maybe in the future, they will get rid of ngModules, or they will make functional components (dummy components) just for the view. Meanwhile, let’s enjoy working with this version 9 and hope for the best in the future.
Dibran Xhymshiti, Software Developer at ABC TECH Group
https://www.linkedin.com/in/dibranxhymshiti/