What's new in Angular 9?

24 March 2020 at 11:22 by ParTech Media - Post a comment

Angular, Google’s JavaScript framework is one of the most well-known open-source frameworks for building client-side web and mobile applications. It has progressed over the years into a comprehensive full-fledged platform with integrated libraries required to build a web app.

The most prominent change is Ivy. With Angular 9, Ivy is the standard renderer. If a renderer is more effective and easier to implement, then you can ship less code as fewer instructions are required.

In this blog, we will take an overview of the new features and the updates and changes offered.

Angular Ivy

With the release of Angular 9, Ivy is a turning-point because it brings Angular applications to an entire new level in terms of performance and size. Ivy doesn’t change the way Angular is used, but it does change how the app is generated. Both, the small apps and large apps will see mostly improved smaller JavaScript bundle size that will eliminate dead-code.

In Angular 9, setting the enableIvy option in the tsconfig.json file is no longer needed since the Ivy renderer is default. The new Ivy compiler will be the default, so Angular apps built with Ivy will be faster and more efficient. Ivy advances bundle size, adds enhanced type checking, improves CSS class and style binding, permits for better debugging, allows the AOT compiler on by default, and faster testing.

Performance and Smaller Bundles

The Ivy compiler has been designed to used tree-shaking that generate less code for each Angular component. The file size of the app (filesize of the created JavaScript bundles) is one of the constant problems with previous Angular versions. The angular framework is much larger compared to other libraries such as React and Vue.js. Possibly, you won’t notice the change while running, although angular runtime is great, loading can take longer, since even a simple application can be quite large.

Essential for Faster Mobile Apps

As mobile usage is growing strongly, a section of the website traffic is made up of smartphones and other mobile devices.

A substantial percentage of these mobile devices have access to web pages from slow internet connections too. It is therefore important to decrease downloadable resources and increase mobile user experience, but such improvements can be difficult; Ivy helps in speeding application start-up by reducing the size of JavaScript classes.

Angular Selector-less Directives

With Angular 9, the ability of ViewEngine to use selector-less directives as base classes is added to Ivy so that the developers can have the advantage of Ivy compilation without missing the earlier functionality.

A decorated child class that inherits a constructor from an undecorated base class is demonstrated below

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; but it was still missing in Ivy's early release. The Ivy compiler didn't interpret information about its constructor parameters, without the @directive annotation identifying the BaseDir class as a directive, Angular 9 is now shipped with this feature, so that it is consistent across all the Angular code-base.

Angular Diagnostics Improvements

Angular 9 will improve support for using the same TypeScript Diagnostics format for the TypeScript Compiler diagnostics. Also, more descriptive error messages will be generated with better template diagnostics.

In earlier versions of Angular, the compiler outputs both native TypeScript diagnostics and its API diagnostics. Angular 9 will also enhance support for the schema registry to prevent potential binding issues while checking DOM (Document Object Model) bindings.

Instead of supporting multiple formats, Angular 9 will simplify the process by converting all Angular TypeScript Compiler (ngtsc) diagnostics to the same TypeScript Diagnostics format.

Internationalization with Angular Ivy

In Angular 9, the i18n code is updated to offer a better platform for supporting compile-time inlining. One more Ivy enhancement relates to internationalization. You can use the Angular CLI to generate most of the standard code essential to create files for translators and to publish your app in several languages.

Dependency Injection Enhancements in Angular Core

Angular Core has some enhancements too. For example, Angular 9 enhances dependency injection support for the providedIn value; providedIn is a decorator that marks a class as available to be provided and injected as a dependency.

It determines which injectors will provide the injectable, by either associating it with an @NgModule or other InjectorType, or by specifying that this injectable must be provided in the root injector, which will be the application-level injector in most apps.

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

Angular Core Type-Safe Changes

One of the APIs for testing Angular apps is TestBed. Angular 9 provides a new TestBed.inject() instead of the deprecated TestBed.get() method:

TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef

The TestBed.get() method is not type-safe, so it is replaced with the new TestBed.inject(). The TestBed API is improved and the inject function does precisely what the get does, while being type-safe at the same time.

Language Service Improvements

The Angular 9 Language Service for Visual Studio Code and WebStorm is further improved with this new version. For example, URL definition is more consistent. Style URLs are checked in the same way as template URLs. Even the URLs that do not point to actual project files are now diagnosed.

Diagnostics are also improved in the Angular Language Service. For example, TypeScriptHost will distinguish severity logging by log, error, and debug methods. Also, template URLs and style URLs that do not point to actual files are now diagnosed as such by the Language Service.

A convenience script is now added to assist with building and testing scripts. In future, Language Service implementation can be further amended with counting directive properties and unifying common logic.

API Extractor Updates

Angular is an all-inclusive framework and depends on several other services and libraries to function efficiently. However, there is a problem of keeping up with updates for these libraries and services, resolutions and new features.

In Angular 9, these libraries will be tracked and will update the API Extractor to the latest version, where it uses Bazel at every build time to detect the API landscape of these libraries. It leverages the TypeScript compiler engine to detect the project's exported API surface, produces a contracts report, points out missing exports and inconsistent visibility, and generates API documentation. Thereby, making it easier to handle maintenance keeping everything updated.

Angular Component Updates

There is an update about Hammer.js which is required to add gesture support and is required, if you want to use the CDK (Component Dev Kit). You can use HammerModule from @angular/platform-browser. You can import it; though optionally with this command:

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

A new clipboard component is available in the @angular/cdk family. A new Google Maps package is available in this new Angular version, termed as @angular/google-maps package. From Angular 9, no component can be imported through @angular/material. You are to use the individual secondary entry-points, such as @angular/material/button.

Updating to Angular 9

To update to the latest Angular 9 version, please use the guide at https://update.angular.io/.