Angular v12- New updates

Angular v12- New updates In Detail-

Transitioning from Legacy i18n Message IDs-

Nullish Coalescing-

{{age !== null && age !== undefined ? age : calculateAge() }}
{{ age ?? calculateAge() }}

Style Improvements-

  1. Will now support inline Sass in the styles field of the @Component decorator. Previously, Sass was only available in external resources due to the Angular compiler. To enable this feature in your existing applications add “inlineStyleLanguage”: “scss” to angular.json. Otherwise, it will be available to new projects using SCSS.
  2. Added support for Tailwind CSS(install the tailwindcss package from npm and then initialize Tailwind to create the tailwind.config.js in your project.)
  3. Sass’s new module system- The node-sass package is unmaintained and no longer keeps up with new feature additions to the Sass language.
    Angular CDK and Angular Material have internally adopted Sass’s new module system. If your application uses Angular CDK or Angular Material, you’ll need to make sure you’ve switched from node-sass to the sass npm package.
    Note- When updating to v12 your app will automatically switch to the new Sass API by updating your application with ng update. This command will refactor any Sass @import statements for Angular CDK and Angular Material code over to the new @use API.
@import ‘~@angular/material/theming;
@include mat-core();
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink);
$theme: mat-light-theme((
color: (
primary: $primary,
accent: $accent
@include angular-material-theme($theme);


@use ‘~@angular/material’ as mat;
@include mat.core();
$primary: mat.define-palette(palette.$indigo-palette);
$accent: mat.define-palette(palette.$pink-palette);
$theme: mat.define-light-theme((
color: (
primary: $primary,
accent: $accent

The Future of Protractor-

Other Introduced Features-

  1. Running ng build now defaults to production for new v12 projects. It is important to note that this is only for new projects.
  2. Strict mode is enabled by default in the CLI. Strict mode helps catch errors earlier in the development cycle.
  3. The production-ready version of Webpack 5 supports Angular.
    We’re also updating the supported TypeScript version to 4.2
  4. Deprecating support for IE11-Removing support for legacy browsers allows us to focus our efforts on providing modern solutions.
    We are going to start including a new deprecation warning message in Angular v12 — and remove support for IE11 in Angular v13.

Breaking changes in Angular 12

XhrFactory has been moved from @angular/normal/http to @angular/normal.
/// Before
import {XhrFactory} from ‘@angular/common/http’;
/// After
import {XhrFactory} from ‘@angular/common’;




Hi there 👋, I am Anil Verma, a full stack web developer, and JavaScript enthusiast. 👥 Ask me anything about web development. 📖 Love to read and write.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Dealing with Complex Objects with Builder Design Pattern

23 Insanely useful NodeJs Libraries you should know in 2020


Insert Object inside an object in MongoDB

Laravel and Vue.JS — What Makes Them such a Power Couple?

Vue + Laravel Web applications

What is “this” in JavaScript

[Action required] Your Trial has Expired — Sun Aug 29 2021

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anil Verma

Anil Verma

Hi there 👋, I am Anil Verma, a full stack web developer, and JavaScript enthusiast. 👥 Ask me anything about web development. 📖 Love to read and write.

More from Medium

Set or Update new Title and Meta Tag- Angular

Angular vs React

Angular vs React.js in Enterprise Level Application

what is webpack in javascript? Understanding basics of webpack