What's new in Angular 9
Before we move into Angular 9 features, recently Angular has released 9.1 and in this version, the major improvement is 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 extension VS Code Extension
Angular is one of the best web development platform and it has evolved over the years, Though there were drastic changes from Angular 2, Angular 4, Angular 5 after that Angular have a team made sure its backward and forward compatibility
Angular will suggest to you what you should take care of before upgrading Angular application and you can follow the link https://update.angular.io and select from which version are you upgrading and also you can select the complexity of your application and this link 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 the 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 breakthrough, 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?
- 1st Generation – Template Engine
- 2nd Generation – View Engine
- 3rd Generation – Ivy
Bye to entryComponents
Most of you have worked with Angular pop-ups or Material 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 are 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 the naming convention 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 a progressive web application and now there is a small change brought to ngsw.json and going forward versioned files will be replaced with just files as the object name
Improved Language Service:
In Angular 9, i18n has been improved for adding compile-time inlining for internalization and also there are some good enhancements are done to definition links that are used in code and now they are more reliable and consistent
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;With true it's mandatory
@ViewChild('foo') foo: ElementRef;Missing @Injectable and incomplete provider definition migration:
In Angular 9, enforcement of @Injectable decorators for DI are 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 needed 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 results https://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 upgrading Angular 9 as it brings a 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 a lot of enhancements during the period especially on Typescript, Javascript, and which involves a lot of npm packages.
Release Date :
Angular 9 released on the 7th of February 2020