Universal Tutorial Logo Universal TutorialUniversal Tutorial Logo Universal Tutorial

What's new in Angular 9

What's new in Angular 9

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 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 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?

  • 1st Generation – Template Engine
  • 2nd Generation – View Engine
  • 3rd Generation – Ivy

Bye 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 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;
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 is a bit stricter and incomplete provider definitions behave differently.But note that it is applicable only for the instantiated classes

  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>.

    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.

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

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

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


You may also like

Free REST APIs for Country,State,City Free REST APIs for Country,State,City
Angular Cascade Dropdowns Angular Cascade Dropdowns

How to Upgrade to Angular 9 How to Upgrade to Angular 9
What's new in Angular 9 What's new in Angular 9
Angular 9 Performance Results Angular 9 Performance Results
Debug Node.js Applications Debug Node.js Applications
Upgrade to Angular 8 Upgrade to Angular 8
Fossil Genwatch 5 Fossil Genwatch 5
Samsung Galaxy Active 2 Samsung Galaxy Active 2
Best Smartwatches in 2019 Best Smartwatches in 2019


Share this page


Universal Tutorial

Good news for all of you, Angular 9 will be released with Typescript 3.7 and here is the pull request merged https://github.com/angular/angular/pull/33717 Which means you can start using t res = data?.key1?.key2; without having to worry about undefined during optional chaining

Jan 15, 2020, 2:51:12 PM