Keeping extra focus on the user experience factor, many software development companies tend to choose the right frontend framework from the alternatives namely Angular, React, Vuejs, Backbonejs, etc. Among these, the most adopted and leading one is Angular just because of its regular updates.

Angular 9 released with the minor version of both the framework and the CLI (Command Line Interface) which brings many new features such as:

• Support for Typescript 3.8: This new version of Typescript brings many new language features that you can use in your Angular project.
• It enhances speed, New Command Line Interface Component Generator Option Display None which provides you to generate component using the CLI with display: non-style for hiding displaying components in place of the default inline used by default.
• Now End-to-End tests support grep and invertGrep which provide you to more easily pick the test you want to run.
• Enhanced HTML and Expression Syntax emphasizing: Using Visual Studio Code with the Language Service Extension which will provide the IDE to syntax emphasize expression in the templates.
• Directionality Query API which provides you to query for the current local direction at runtime, by default TSLint 6.1.

Using the following command, we can update to this latest version of Angular:

ng update @angular/cli @angular/core

• This will ensure that you can have all these new features and bug fixes in your project.
• This is the last planned pretty release for 9.x.
• The team will now start working on Angular 10.0, by making prereleases times per week, even if they will be having only minimal changes at first.

What is the Angular 9 New Features?

• Angular is one of every three most popular JavaScript framework for building client-side web and mobile apps.
• It is built and supported by Google and has been developed over the years into a full platform with unified libraries needed for front-end web development.
• Since developers and companies around the world are depending on Angular for building their frontend apps, the team back of the framework follows a rigid plan for updates with a new pretty version released every six months. The current little version is Angular9.
• This means we are already using the new version. But earlier, let us see several of the new features of Angular 9. Compared to React or Vue, performance and file size is a big drawback of Angular.
• One little problem of the previous version of Angular is the largest size of the final bundle which affects the download time and as a result.
• Angular 9 comes with new features, more importantly, the Ivy compiler which gives a massive boost in performance.

In nutshell following are the new features of Angular9:

• Lower bundles and best performance.
• The Ivy compiler: The Ivy compiler’s default use is the most important feature of Angular 9, Ivy is what really designed to solve the pretty problems of Angular like the Performance and Largest file size selector fewer bindings support for Angular Ivy.
• Internationalization support for Angular Ivy.
• Support for TS(TypeScript) Diagnostics format.
• Support for most scopes in provided.
• A New Type-Safe TestBed.inject() Method in place of TestBed.get().

Smaller Bundles and Better Enhancement Because of Ivy

What is Ivy?

Ivy is a full rewrite of the Angular provider which is simply the part of Angular that transforms your Angular templates into JavaScript code.

• Past versions of Angular have quite a large file size of the final bundles compared to React or Vue.
• The enhancement of the Angular runtime is relatively good but the loading time is longer because of the large file size which impacts the whole performance of the application.
• Enter Ivy.

Before Angular 8, the framework used ViewEngine as the renderer, With Angular8, Ivy is in trial mode behind an optional flag, With Angular 9+, Ivy is the default compiler.

• Angular components are a combination of Typescript code, HTML, and CSS. Typescript is a superset of JavaScript, that is required to be compiled into JavaScript before it can be consumed by a web browser.
• Angular earlier made use of ViewEngine to transform TypeScript code to JavaScript

These are some pieces of information about Ivy:

• The Ivy compiler is abstracted from developers and will replace ViewEngine so what we know about Angular is remain legal.
• Angular8 provides developers to play with Ivy but Angular9, Ivy is the default renderer.
• The Ivy compiler outputs usually little JavaScript bundles, so Ivy overcomes Angular’s bundle issues.
• The Ivy compiler will not alter how you work with Angular so what you earlier learned about Angular will still work in Angular9+.
• Ivy will be a litter backbone because it takes Angular Applications to the next level in terms of enhancement and final bundle size.

How to Work with Ivy?

• In Angular9+, Ivy shall be the by default renderer, so Angular application shall be faster and smaller.
• In Angular8, we require to activate or enable Ivy by including the following lines to the tsconfig.json file:

“angularCompilerOptions”: {

“enableIvy”: true

}

• We can then invoke the compiler by running the ngc command inner the node_modules folder:

 $ node_modules/.bin/ngc

• Starting with Angular9, we do not require to do the earlier steps because of Ivy which is the default compiler.

Selector Less Directives in Ivy

 Using selector less directive as parent or base classes are already supported in the previous ViewEngine but missing in the Ivy preview in Angular8. This is now included in Angular9.

• Consider the following pattern which showing a decorated child class that inherits a constructor from an undecorated parent class:
• Let us take, In example, this class:

export class ParentDirective {

constructor(@Inject(ViewContainerRef) protected viewContainerRef: ViewContainerRef) { }

}

• In ViewEngine these codes will work but these will not work in Ivy before Angular9

@Directive({

selector: ‘[child]’,

})

export class ChildDirective extends ParentDirective {

// constructor will be inherited from ParentDirective  

}

• In Angular8 Ivy, we require to decorate the parent directive with @directive decorator to get the appropriate behavior.
• Angular9 will now support this feature for the interest of consistency throughout all of the Angular codebase.

Support for TypeScript Diagnostics Format

•  Angular9 will include support for using the same TypeScript Diagnostics structure for the TypeScript Compiler diagnostics.
• Also, most descriptive error messages will be generated because of a better template diagnostic.
• In earlier versions of Angular, the compiler outputs one and two both native TypeScript diagnostics and its API diagnostics.
• Angular9 will also include support for the schema registry to prevent potential binding issues whereas checking DOM bindings.

Support for Internationalization in Angular Ivy

•  Angular Ivy has included enhancements for internationalization in Ivy which was lacking in the Angular8 preview.
• In Angular9, the i18n code has been upgraded to give a better platform for supporting compile-time inlining.

Support for more scopes in providedIn

• ProvidedIn is a decorator that tracks a class as available to be provided and injected as a dependency.
• It determines that injectors will allow the injectable, by whether relating it with an @NgModule or another InjectorType, or deciding that this injectable should be provided in the root injector, that will be the application level injector in most applications.
• Angular9 includes support for the platform and any scopes.

A New Type Safe TestBed.inject() Method In place of TestBed.get()

• Angular9 allows a new TestBed.inject() in place of the deprecated TestBed.get() method:

TestBed.inject(ChangeDetectorRef) // It returns ChangeDetectorRef

• The TestBed.get() method is not type-safe so it was replaced with the new method, that is TestBed.inject() method

Conclusion

In this blog, we have discussed the new Angular9 features as v9 was just released and Now the Angular team is working approach releasing Angular10.

Author Bio: Ajay Patel – Technical Director, iFour Technolab Pvt. Ltd.

A Seasoned technocrat with years of experience building technical solutions for various industries using Microsoft technologies. With sharp understanding and technical acumen, have delivered hundreds of Web, Cloud, Desktop and Mobile solutions and is heading the technical department at AngularJS Frontend Development Company – iFour Technolab Pvt. Ltd.