What’s New in Angular 9 ?

What’s New in Angular 9 ?

This is the major release from Google, that spans from the entire Platform including the Framework, Angular Material, and the CLI. In this Release, applications are switched to Ivy Compiler by default during runtime and it helped to introduce a lot of improved ways of testing components. This is one of the major releases in the last 3 years and everybody is excited with all the ways to empowers the developers to build robust applications and better applications to contribute to the Angular ecosystem.

How to update to Version 9.0?

To update to version 9 first, we need to update the current version of angular to final version 8 and then update to 9 to have a better experience.

What is Ivy Compiler 

As mention above Angular 9 moves all applications to use the Ivy Compiler runtime by default.

Here is the list of major advantages of using Ivy Compiler and Runtime.

Smaller Bundle Sizes 

It is designed to remove parts of angular that aren’t being used via tree-shaking and to generate less code for angular components. Small apps and large apps can see the most dramatic size savings with these improvements.

Faster Testing

Implementation of Testbed in Ivy is completely revamped to make it more efficient and faster.

In earlier versions, Testbed would recompile all the components every time you run a test irrespective of whether any components were changed or not. Now in Ivy, Testbed doesn’t recompile components unless a component is changed manually, which allows us to avoid the unnecessary recompilation of components that were not changed. This has increased the testing rate of the applications to 40-50% faster.

Better Debugging

Ivy provides more tools for debugging your applications. Ivy offers now ng object for debugging when running the applications in debug mode. Ivy also improves the stack trace for debugging issues such as the “ExpressionChangedAfterItHasBeenCheckedError”.

Improved CSS class and style binding

Previously, if an application contained competing definitions for a style, those styles would destructively replace each other. With Ivy, the styles are merged in a predictable way. In version 9 you can manage your styles through a clear, consistent order of precedence that isn’t dependent on timing. The highest preference is given for the most specific styles.

Ex : [style.color] overrides a conflicting binding to [style].

Improved Type Checking

Using new compiler, you can apply more strict rules. This feature helps the teams to catch the bugs much earlier in the development process.

It supports 2 main flags for additional type checks in addition to the default checks.

Full Template Type Check — Activating this flag tells the compiler to check everything within your template (ngIf, ngFor, ng-template, etc)

Strict Templates — Activating this flag will apply the strictest Type System rules for type checking.

Improved Build Errors

New Ivy compiler is not only faster but offers strong type safety, but also it makes all the error messages more user-readable format.

Improved build times, enabling AOT on by default

A lot of improvements are made to compiler’s performance with the new Ivy’s architecture. Compiler’s performance is measured in terms of the overhead on top of a plain Typescript compilation of an application. These improvements mean that AOT builds can be noticeably faster and can be used for dev-mode for the first time because of the speed. Now ‘ng-serve’ uses the compile-time checking as production builds, improving the developer experience for Angular significantly.

Improved Internationalization

Internationalization has been the core feature of Angular. In the latest version, this feature is made much faster by moving the build-time i18n substitutions later in the build process to make the process faster by 10 times.