{

Learn Angular 12 version released and features


Angular 12 version 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

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?

  • View engine is deprecated
  • Nullish Coalescing operators syntax are 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 are 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 deprecated by adding modern features to the latest browsers. Still, It supports Angular 12 features with a warning message.

It is going to remove in the Angular 13 version completely

Strict mode is enabled default in Angular 12

Strict modes use to catch the errors in development itself.

with Angular 12 CLI, the application is created with 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 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 released with the production version of webpack 5.

Some other Angular 12 features

  • Typescript version is upgraded to 4.2
  • View Engine is deprecated in Angular 12
  • HTTP package has improved
  • logging and reporting is improved
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.