Learn Angular 12 version released and features

Learn Angular 12 version released and features

Angular 12 version is released on May 26 2021 by Google

In this tutorial, learn how to upgrade Angular 11 to 12, and Let’s see the features of the latest angular release.

How to upgrade an existing application to Angular 12 version

if your application is using angular 11, Please use the below command to upgrade angular 12

 npm install @angular/core@12 @angular/cli@12

What are the features of Angular 12?

  • The view engine is deprecated
  • Nullish Coalescing operators syntax is introduced in Angular templates
  • Styles Improvements
  • Webpack5 support
  • IE11 Support Deprecated
  • Updated TypeScript support to version 4.2
  • ng build defaults to production build

The angular team wants to remove the legacy browser supports, SO the Angular 12 release displays a warning message.

Nullish Coalescing operators

Nullish Coalescing is introduced in ECMAScript 2020, and typescript also.

It is a logical operator used to check null or undefined values on two values. And the symbol is `double question marks(??)

Here is an example

const result = null ?? "abc";
console.log(result); // abc

const result1 = 45 ?? 0;
console.log(result1); //45

These operators are used in typescript component code as well as HTML template component expressions.

Internet Explorer version 11 Support Deprecated

Internet Explorer 11(IE11) supports deprecation by adding modern features to the latest browsers. Still, It supports Angular 12 features with a warning message.

It is going to remove from the Angular 13 version completely.

how to enable Strict mode default in Angular 12

Strict modes used to catch the errors in development itself.

With Angular 12 CLI, the application is created with the default strict mode

ng new angular-application

It will create an angular application.

It creates the following files with strict:true angular.json contains strict: true under @schematics/angular:application

{ "projects": {
    "angular-starter": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
    }
}

And tsconfig.json contains the following entries with true values.

  • strict
  • strictInjectionParameters
  • strictInputAccessModifiers
  • strictTemplates
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",

    "strict": true,

    "target": "es2017",
    "module": "es2020",
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

You can still create an application with a non-strict mode.

ng new angular-app --strict

Style improvement with inline styles

Angular 12 provides inline SCSS styles using styles fields.

In the typescript component, you can add inline SCSS styles.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],

  // Supported from angular version12
  styles: [
    `
      div {
        background-color: red;
      }
    `,
  ],
})
export class AppComponent {
  title = "angular app";
}

It generates CSS and adds output CSS in a style tag.

Angular 12 support for webpack 5 version

With the Angular 11 version, Webpack 5 add as experimental support. Angular 12 was released with the production version of webpack 5.

Some other Angular 12 features

  • The typescript version is upgraded to 4.2
  • View Engine is deprecated in Angular 12
  • The HTTP package has improved
  • logging and reporting are improved