Angular 12: Features, Deprecations & Migration

In this post, We are going to discuss, the new features in the latest release Angular 12, deprecated APIs and migration form 11

You may also be interested in: “Realtime with serverless using Websocket in AWS”

Features:

Nullish Coalescing:

Nullish Coalescing first was introduced in Typescript & developers were able to write the code with more cleaner approach.

And hence, now Angular view template also supports Nullish Coalescing from Angular 12.

You can think of this feature as a way to “fall back” to a default value when dealing with null or undefined. When we write code like.

For Example:

{{ foo ?? bar() }}

This is a new way to say that the value foo will be used when it is “present”; but when it is null or undefined, calculate bar() in its place.

Again, the above code is equivalent to the following.

{{ foo !== null && foo !== undefined ? foo : bar() }}

Forms: introduce min and max validators

If I have an <input type="number" min="0" [(ngModel)]="val" #num="NgModel">, I should be able to assume that num.valid will be false when the input’s value is -10.

That’s just a really basic and logical assumption that developers will make, and to do otherwise, out of the box, without requiring an extra “workaround” directive, etc, is a disservice to them.

Fix: Previously min and max attributes defined on the <input type="number"> were ignored by Forms module. Now presence of these attributes would trigger min/max validation logic (in case formControl, formControlName or ngModel directives are also present on a given input) and corresponding form control status would reflect that.

Added historyGo method to Location service:

historyGo, that will let the user navigate to a specific page from session history identified by its
relative position to the current page.

Documentation: https://angular.io/api/common/Location#historyGo

Example:

location.historyGo(2) moves forward two pages and location.historyGo(-2) moves back two pages. When we try to go beyond what’s stored in the history session, we stay in the current page. Same behaviour occurs when relativePosition equals 0

location.historyGo(2)

Support APP_INITIALIZER work with observable

In Angular v12 you will be able to directly return an Observable. Let’s see how:

import { APP_INITIALIZER, FactoryProvider } from '@angular/core';
import { ConfigService } from "./config.service";

function loadConfigFactory(configService: ConfigService) {
  // Easy as pie  
  return () => configService.getConfig(); //  

  // How you might've done it “before”
  // return () => configService.getConfig().toPromise();
}

export const loadConfigProvider: FactoryProvider = {
  provide: APP_INITIALIZER,
  useFactory: loadConfigFactory,
  deps: [ConfigService],
  multi: true
};

An important thing to note is that the Observable must complete, otherwise the bootstrap process will not continue.

Support http client request metadata for use in interceptors:

Previously, when using an http interceptor you cannot pass meta data about the request to the interceptor

Now, Http context stores arbitrary user defined values and ensures type safety without actually knowing the types. It is backed by a Map and guarantees that keys do not clash.

Documentation: https://angular.io/api/common/http/HttpContext

@Injectable()
export class UsersService {
  constructor(private http: HttpClient) {}
  
  getUsers() {
    return this.http.get('....', {
      context: return new HttpContext().set('cacheRequest', true); // We have added context here
    })
  }
}

Disabling animations through BrowserAnimationsModule.withConfig

Previously, the only way to disable animations was by providing the NoopAnimationsModule which didn’t allow for it to be disabled based on runtime information.

These changes add support for disabling animations based on runtime information by using BrowserAnimationsModule.withConfig({disableAnimations: true}).

Documentation: https://angular.io/api/platform-browser/animations/BrowserAnimationsModuleConfig

Deprecated APIs:

Support for IE11:

Angular support for Microsoft’s Internet Explorer 11 (IE11) is deprecated and will be removed in Angular v13.

Documentation: https://angular.io/guide/deprecations#internet-explorer-11

Node Version 10 or older:

You can no longer use Angular with Node.js version 10 or older.

Migration to Angular 12

First check your application’s version of Angular: From within your project directory, use the ng version command. So that you can select the version in the interactive update guide given by Angular.

Angular provides complete instructions in the interactive Angular Update Guide, So that you can select the options based on your app and it will give you the steps and guide for updating.

Unimedia Technology

Here at Unimedia Technology we have a team of Cloud Native Developers that can help you develop your most complex AWS and Azure Applications.