What's new in Angular 9

Before we move into Angular 9 features, recently Angular has released 9.1 and in this version major improvement are done on the ngcc in turns faster build speed and now Angular 9.1 has support for Typescript 3.8 which means you can get benefits of Type only imports and exports and top level awaits and apart from this there are major changes are done on improved HTML and expression syntax highlighting to see in action install the official angular language service extensionVS Code Extension

Angular is one of the best web development flatform and it has evolved over the years,Though there were drastic changes from Angular 2, Angular 4, Angular 5 after that Angular have team made sure it’s backward and forward compatibility

Angular will suggest you what you should take care before upgrade Angular application and you can follow linkhttps://update.angular.io and select from which version are you upgrading and also you can select the complexity of your application and this link you suggest you which all libraries should be updated before updating the Angular applications

As most of you aware that Angular 9 has released release candidate and latest version can be found here and you can check out it here https://next.angular.io/ about the next version of angular, let’s see what the major changes that are developed in the Angular 9

Build Size:

The most important thing for any frontend application is your bundle should be very lightweight so that it’s very faster for initial load, Angular 9 hello world tutorial was able to build bundle size with ~215kb with the previous version of Angular (Angular 8) had build size of ~250Kb

Ivy Compiler :

In Angular 8 the Ivy was optional, you had the option to change the in tsconfing by using the enableIvy with the true flag but in Angular 9, Ivy renderer is the default and this a huge brake through and this one of the reasons the bundle size has been reduced drastically in the latest version. Ivy is considered as the 3rd generation rendering engine used by Angular, so what are previous rendering engines?

1 st Generation – Template Engine

Generation – Template Engine 2 nd Generation – View Engine

Generation – View Engine 3rd Generation – Ivy

Bye bye to entryComponents :

Most of you have worked with Angular pop-ups orMaterial Dialogs and one of the usual errors we used to get was No Component Factory Found. Did you add it to @NgModule.entryComponents? and the reason was we used to miss add this DialogComponent in the entryComponents so from Angular 9 there is no more entryComponents

ngForm to ng-form:

From Angular 9, the form tag used in angular has been changed from ngForm to ng-form so this will align with naming convetion used for ng-container, ng-template

Ivy Runtime Debugging:

From Angular 9, you can directly call the methods and update the state while debugging and you access methods such as ng.applyChanges,ng.getInjector, ng.getDirectives,ng.getHostElement,ng.getRootElements etc.

Service Worker ngsw-config.json updates for PWA Apps:

If you are using progressive web application and now there is small change brought to ngsw.json and going forward versionedFiles will be replaced with just files as the object name

Improved Language Service:

In Angular 9, i18n has been improved for adding compile-time in lining for internalization and also there are some good enhancments are done to definition links which are used in code and now they are more reliable and consistant

Static flag migration:

Removes the `static` flag from dynamic queries As of Angular 9, the "static" flag defaults to false and is no longer required for your view and content queries.



With false default hence static is not necessary

@ViewChild('foo') foo: ElementRef;

@ViewChild('foo') foo: ElementRef;

With true it's mandatory

Missing @Injectable and incomplete provider definition migration:

In Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and incomplete provider definitions behave differently.But note that it is applicable only for the instantiated classes

@Injectable() export class InsuranceService {...};

ModuleWithProviders migration:

In Angular 9, the ModuleWithProviders type without a generic has been deprecated. This schematic will add a generic type to any ModuleWithProviders usages that are missing the generic. In the example below, the type of the NgModule is SomeModule, so the schematic changes the type to be ModuleWithProviders <SomeModule>.

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

Renderer to Renderer2 migration:

As of Angular 9, the Renderer class is no longer available.Renderer2 should be used instead. No action is need and the schematic should handle most cases with the exception of Renderer.animate() and Renderer.setDebugInfo()

Undecorated classes with decorated fields migration: As of Angular 9, it is no longer supported to have Angular field decorators on a class that does not have an Angular

Undecorated classes with DI migration:

As of Angular 9, it is no longer supported to use Angular DI on a class that does not have an Angular decorator,in below, a @Directive() decorator is added to VehicleMenu because VehicleMenu uses dependency injection.

@Directive() export class VehicleMenu { constructor(private vcr: ViewContainerRef) { } } @Directive({ selector: '[car-menu]' }) export class CarMenu extends VehicleMenu { }

Performance: Angular 9 have scored really well performance benchmarks compared to Angular 8 and you can take a look at in detail performance resultshttps://www.universal-tutorial.com/angular-tutorials/angular-9-performance-results

Conclusion (So is it necessary to upgrade to Angular 9?)



Yes, indeed it is worth to upgrade Angular 9 as it brings the better performance compared to the previous version with very less bundle size and also this another way improves the usability for smaller devices where there is a possibility of slow internet connection. And also it's always best practice to keep updating any frontend frameworks as there are lot of enhancemnts during the period especially on Typescript, Javascript and which inolves lot of npm packages.



Release Date :

Angular 9 released on 7th of February 2020