{

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 latest angular release.

How to upgrade existing application to Angular 12

if your application is using angular 11, Please use 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

Angular team wants to remove the legacy browsers supports, SO Angular 12 release displays warning message

Nullish Coalescing operators

Nullish Coalescing are introduced in Ecmascript 2020, and typescript also.

These are logical operators used to check null or undefined values on 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) support is deprecated by adding modern features to latest browsers. Still you can have a support in Angular 12 features with warning message.

It is going to remove completely in Angular 13 version onwards

Strict mode is enabled default in Angular 12.

Strict mode are used to catch the errors in development itself.

with Angular 12 cli, application is created with default strict mode

ng new angular-application

It will create a 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 a application with non strict mode

ng new angular-app --strict

Style improvement with inline styles

Angular 12 provides inline scss styles using styles fields

In 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 added output css in style tag

Angular 12 support for webpack 5 version.

With angular 11 version, Webpack 5 are added as experimental support. Angular 12 released with 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.