Welcome Angular 9 with many bug fixes, performance enhancements for Ivy, and some new exciting features. Embark on a new journey with Angular 9.

JavaScript Bundles and Performance (Ivy Improvements) :

The framework banked upon ViewEngine for building and rendering code in browsers before introducing Angular 8. The role of Angular ViewEngine is to translate the templates and components into regular HTML and JavaScript. This simplifies the task for the browser by interpreting and displaying them.

With Angular 8, the opt-in Ivy was one of the significant features to drive the Angular development to a new level where it replaced ViewEngine without changing the method of work with Angular. Ivy in Angular 8 is its new internal build and render pipeline where the renderer takes the instructions that are given as input into the components. These inputs are then translated into instructions that change the Document Object Model (DOM).

Ivy has now become a standard renderer with Angular 9 with more efficiency and ease of implementation. Now you can experience less coding as only fewer instructions are required. The problem of bundles with Angular is thus solved by Ivy as it yields much smaller JavaScript bundles. Ivy is expected to provide one level-up performance with Angular 9.

Thus, welcome Ivy’s improvements with Angular 9 as it reduces the size and boosts performance of the applications. 

AOT Improvements :

One of the major improvements in Angular 9 is compiling CLI apps in AOT mode by default. Since an Angular application mainly consists of components and their HTML templates which is not understood by the browser, there rises a need of compilation process before running in the browser. Here AOT comes into the picture as this compiler converts the Angular HTML and TypeScript code at the browser. The compilation process takes place during the build process. This results in a faster rendering in the browser. The Angular Ahead of Time compiler with Ivy is faster. 

With AOT, there will be fewer asynchronous requests as within the application, the compiler inlines the external HTML templates and CSS Style sheets eliminating the need of ajax requests separately for those source files.

The application payload reduces with AOT because if the app is already compiled, there will be no need to download the Angular compiler which is half of Angular itself. 

The use of AOT compiler helps in detecting and reporting template binding errors before the users can see them in the build step. 

Long before serving the clients, AOT compiled HTML templates and components into JavaScript files. Due to this reason, there is no risk of client-side HTML or JavaScript evaluation or no risk of reading the templates,there are fewer opportunities for injection attacks. 

Angular Diagnostic Improvements:

The Angular Compiler generated both native TypeScript and its own internal API diagnostics previously. But with recent enhancements, TypeScript Diagnostics was benefitted. 

With Angular 9, rather supporting multiple formats, the process will be simplified. There will be conversions of all Angular TypseScript Compiler (ngtsc) diagnostics to the same TypeScript Diagnostics format. 

Further, Angular 9 will restrict the apps from running into potential binding issues. This will be done by using the schema registry to check DOM bindings. Also, highly descriptive error messages will be generated with the help of the consistent template diagnostics. 

Highlights of the Major Changes in Angular 9

• Angular compiles with Ivy by default.
• The new version of TypeScript is available i.e. TypeScript 3.6. The older versions of TypeScript 3.4 and 3.5 is no longer supported.
• CLI apps are compiled by AOT mode by default. 
• tslib is no more listed as direct dependency. It is listed as a peer dependency. 
• Converted all ngtsc diagnostics to ts.Diagnostics
• Bazel: Supports ts_library targets as entry-points for ng_package
• ivy: add new benchmark focused on template creation
• ivy: add ngIf-like directive to the ng_template benchmark 
• ivy: avoid native node retrieval from LView 
• ivy: avoid repeated native node retrieval and patching 
• ivy: avoid repeated tNode.initialInputs reads
• ivy: move local references into consts array, closes 
• language-service: enable logging on TypeScriptHost.
• language-service: provide diagnostic for invalid templateUrls.
• language-service: provide diagnostics for invalid styleUrls.

For other updated bug fixes, deprecations, and features refer the link.

Some important facts about upgrading to Angular 9

If your application uses CLI, updating to Angular 9 is automatic with ng update script:

npm install –no-save @angular/cli@^8.3.15

ng update @angular/cli @angular/core –next

For better updating experience: Update your local `@angular/cli` to version 8.3.15 or later 8.x version before updating.

During the RC period, it is mandatory to include –next command line flag. 

*Note: This flag won’t be used further once the Angular 9 will be final released. 

For more migrations i.e. which code is changing and why, refer the link.

In a Nutshell

With these major changes in Angular 9, the Angular developers can now experience a more clear structure and syntax for their projects. Angular development companies can heave a sigh of relief with these new improvements in Ivy as they can leverage the power of Ivy renderer for building flexible and faster Angular applications.