Smaller bundle sizes, improved build times, and better debugging are just some of the new improvements available in Angular 9, the latest major release of Google's popular JavaScript SPA (Single Page Application) framework. These improvements are happening thanks to the release of the much anticipated Ivy rendering engine that has been in development by Google since 2018.
As the number of changes and improvements in this release is quite significant, this news post will focus on the most important changes. Additional information about the release can be found in the official announcement on the Angular blog.
Reduced bundle sizes
The Ivy compiler improves the way Angular handles components reducing the resulting file sizes. In addition, Ivy uses tree shaking, allowing it only to include the parts of Angular needed for the current application.
According to Google, these improvements can reduce the bundle size by up to 40%. However, these improvements specifically target smaller applications that only use a limited subset of Angular capabilities and large applications that suffer from large factory sizes. It will be interesting to see how the reduction in bundle sizes affects the creation of Web Components using Angular. While the capability to create Web Components has been present for a while, the resulting component sizes were generally too large to be considered useful.
Improved build process
The Ivy compiler enables faster compilation of Angular applications. Google state that they saw ~40% improvement with their angular.io documentation app.
Besides the obvious benefit of faster compilation times, the new process also allowed Angular to start using AOT (or Ahead of Time) compilation during the development process (when using ng serve). Until recently, AOT compilation was limited to production builds due to the long compilation time required, which resulted in some edge cases where builds would pass in development, but fail in production.
The new build process includes two final improvements. It removed the need to use the 'entryComponents' array within the NgModule definition that was needed when generating dynamic components. It also included improved error handling, which should simplify the debugging process.
Better Debugging
When running Angular applications in debug mode, Ivy exposes a set of new capabilities on the global ng object that allows developers to manually call methods, update state/trigger change detection, and access instances of their components.
Ivy also improves the stack trace provided when Angular encounters an error, providing more accurate links to the offending pieces of code/templates.
Upgrading to Angular 9
The upgrade path from Angular 8 to Angular 9 is straightforward.
First, update to the latest version of 8:
ng update @angular/cli@8 @angular/core@8
Then, update to 9:
ng update @angular/cli @angular/core
A more comprehensive upgrade guide is available at https://angular.io/guide/updating-to-version-9
