Angular 9 New Features

Let’s discuss some of the cool new features introduced in Angular 9 like default use of the Ivy renderer, etc. Although the versioning change from angular 8 to 9 seems like a big step, but Angular 9 is an evolutionary release that includes mostly bug fixes & improvements.

1- Default Ivy

If you were using Angular 8, you would remember that the Ivy renderer was already available for us to use. To use it you had to go your tsconfig.json file and add the line below to it:

"angularCompilerOptions": {    
"enableIvy": true  

Now, with Angular 9, the Ivy renderer is the default Angular compiler, so you do not need to do anything new to your tsconfig file. With Ivy, both small apps and large apps will see largely improved bundle size savings thanks to Ivy’s tree-shaking feature, which will eliminate dead-code.

ModuleWithProviders Support

If you have used ModuleWithProviders before Angular 9, you may or may not have been strongly typing it, but now in this version you have to always use the generic ModuleWithProviders<T> type to show your module type. Your declaration might have been looking thus:

@NgModule({ ...}) export class MyModule { static forRoot(config: SomeConfig): ModuleWithProviders {  
   return {  
         ngModule: SomeModule,  
         providers: [{ provide: SomeConfig, useValue: config }]  

Now, this is how they should look:

@NgModule({ ...})  
export class MyModule {  
  static forRoot(config: SomeConfig): ModuleWithProviders<**SomeModule**>  
   return {  
         ngModule: SomeModule,  
         providers: [{ provide: SomeConfig, useValue: config }]  

Do not worry about migrating the code yourself. After you have updated to version 9, your codebase will be automatically migrated. This also applies to all migration schematics, as soon as you update with the command:

ng update

All of your code becomes in sync with the latest changes.

Changes in Angular Forms

There are a few form changes you should be aware of in this new Angular version. The first is that the <ngForm></ngForm> is no longer a valid selector to use while referencing an Angular form. You can use the <ng-form></ng-form> instead. Also the warning for using the removed form tag has been removed too. Secondly, the FormsModule.withConfig has been removed and you can now use the FormsModule directly.

Selector-less Directives

One feature missing from the Angular 8 Ivy preview that had been available in ViewEngine was the ability to use selector-less directives as base classes. This feature has been added to Ivy in angular 9 so that angular devs get the advantages of Ivy compilation, but don’t miss previous functionality.

Consider the following pattern showing a decorated child class that inherits a constructor from an undecorated base class:

export class BaseDir {  
  constructor(@Inject(ViewContainerRef) protected vcr: ViewContainerRef) {}  

  selector: '[child]',  
export class ChildDir extends BaseDir {  
  // constructor inherited from BaseDir  

Angular ViewEngine already supports this pattern. Still, it was missing in Ivy’s initial release: without the @directive annotation identifying the BaseDir class as a directive, the Ivy compiler didn’t interpret information about its constructor parameters.

Version 9 will now ship with his feature so that it becomes consistent across all of the Angular codebase.

Dependency Injection Changes

Now let’s take a look at some smaller, but no less welcome, updates and improvements we’ll see in Angular 9.

Angular Core has some enhancements too. For example, Angular 9 adds dependency injection support for the providedIn value:

  providedIn: 'platform'  
class MyService {...}

Angular 9 extended the vocabulary for the providedIn property to also include the ‘platform’ and ‘any’ scopes.

Angular Component Updates

For the CDK, there is an update about Hammer.js, which helps to add gesture support and was required if you wanted to use the CDK. Now it is optional. You can import it though optionally with this command:

import `HammerModule` from [@angular/platform-browser]

There is a clipboard module that shipped with this new version too, available in the CDK family. There is also a new Google Maps package finally available in this new Angular version, called the @angular/google-maps package.

i18n Improvements

Angular as a JavaScript framework has long supported internationalization, and with the Angular CLI you can generate standard codes that would help create translator files so that your application can be published in multiple languages. This process has been even further refactored by the Angular team on Ivy to make it easier to add compile-time inlining.

Type-safe Changes in Angular Core

Angular 9 offers modified TestBed (the main unit test API for Angular apps) to replace the old get function with the new inject method. The get method still works, but is deprecated. TestBed.inject is the preferred option starting with Angular 9:

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

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

Currently, TestBed.get is not type-safe. Fixing TestBed.get would introduce a massive breaking change, so the Angular team decided to replace it with TestBed.inject.

This was a quick breakdown of most of the features and updates on Angular 9.

Leave a Reply

Your email address will not be published. Required fields are marked *