New features available in Angular 9

New features available in Angular 9

Reading Time: 4 minutes

Angular is one of the most popular frameworks for making web applications. Angular community launched Angular 9 yesterday. The latest version is smaller, faster, easier to use, and has given some more powerful features which enhances our application.

The major change with this release is that it switches the application to the Ivy compiler and run-time by default. This version also introduced various improved ways of testing components.

Key Changes in Angular 9

Ivy in action:

In version 9, all the applications are moved to use the Ivy compiler and run-time by default. As in version 8, Ivy was optional. If you want Ivy as compiler option you had to explicitly enable it by adding the following lines to the tsconfig.json:

"angularCompilerOptions": {     
   "enableIvy": true   
}

Ivy compiler is important as it offers lot of advantages.

1. Smaller bundle sizes:

The Ivy compiler has been designed to remove parts of Angular that aren’t being used and generate less code for each component. With this improvement, apps can see the most dramatic size savings.

2. Improved type checking:

The Angular compiler can check more of the types of your application, and it can apply more strict rules. This helps to catch bugs easily. For strict type checking, two main flags for type checks are added:

• fullTemplateTypeCheck: This flag tells the compiler to check everything within template (ngIf, ngFor etc.)
• strictTemplates: This flag will apply the strict type system rules for type checking.

3. Type safe changes in testing:

TestBed.get is not type-safe. So, TestBed.inject is the preferred option in version 9. The get method still works but is deprecated.

// This code still works, but it's deprecated:
TestBed.get(ChangeDetectorRef) // returns any 

// inject() now replaces get():   
TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef

4. Enabling Ahead-of-Time (AOT) on by default:

Enabling AOT by default improves the build time. The new architecture of Ivy improves the performance of compiler by nearly 40% and decrease the overhead from 0.8x to 0.5x. For the first time, AOT mode is enabled by default for dev builds. This results in the improvement of developer experience. As benefits from compile-time checking in production build are now available for dev build.

In version 8 build files are:

In version 9 build files are:

5. Improved build errors:

With improved type safety, version 9 also makes all the error message easy to read.

In version 8, the compiler error is:

In version 9, the compiler error is:

Internationalization (i18n)

In the newer version, internationalization becomes faster by moving the build-time i18n substitutions later in the build process. This change allowed us to make it up to 10x faster.

New options in dependency injection

While creating @Injectable services we have to provide where it should be added to the injector. In previous versions, only two options are there – root and module options. But in version 9, two more options are added: 

• platform: This option makes the service available in a special singleton platform injector that is shared by all applications on the page.
• any: This option provides a unique instance in every module (including lazy modules).

Typescript 3.7 Support

In the latest version, Angular is now updated to work on Typescript 3.7. It also includes the extremely popular optional chaining feature.

The optional chaining operator ?. permits reading the value of a property located deep within a chain of connected objects. The ?. operator functions similarly to the . chaining operator, except that instead of causing an error if a reference is null or undefined, the expression short-circuits with a return value of undefined.

const person = {
   name: 'Rudar Daman',
   company: {
     name: 'Knoldus'
   }
 };
console.log(person?.age); // Output: undefined

ng update @angular/cli@8 @angular/core@8

ng update @angular/cli @angular/core

Conclusion: With the inclusion of these powerful features, the development of Angular application becomes better than before.

For more information on Angular 9, visit docs

Thanks for reading!!!