What's new in Angular 12

Updated on: May 26, 2021

Looking for What's new in Angular 12 and new features released in Angular 12, then refer below article, Angular 12 is released on May 12th 2021 with some new features and some improvements in the Stylesheet and in the documents.

1. Removed Legacy View Engine and moving to Ivy engine

New application will be created with Ivy engine and Legacy View engine is Deprecated in Angular 12 and will be removed from Angular 13 release. Old Libraries using Legacy view engine in node_modules will be updated to use Ivy runtime by Angular Compatibility Compiler (ngcc). With Ivy, there is improvement in the application compilation, since it only compiles only changed components.

2. Nullish Coalescing Feature:

Nullish Coalescing feature helps to check whether variable is "Null" or "Undefined" using "??" keyword in Angular 12, following example shows checking for Null or Undefined before Angular 12 and after Angular 12:

Before Angular 12:

  1. name= undefined;
  2. getName() {
  3.    return this.name !== null && this.name !== undefined ? this.name : 'Name is undefined';
  4. }

After Angular 12:

  1. name= undefined;
  2. getName() {
  3.    return this.name ?? 'Name is undefined';
  4. }


3. Stylish Improvement:

Angular 12 now supports Inline Sass in the Styles field of @Component section on Angular Component page. The example is shown below:

  1. @Component({
  2.   selector: 'app-root',
  3.   templateUrl: './app.component.html',
  4.   // styleUrls: ['./app.component.css']
  5.   styles:  ['$size: 50px; div{ font-size:$size;}']
  6. })

Also set the below statement in angular.json configuration file, in projects=>architect=>build=>configurations=>development section, to get the Inline Sass worked in the Angular 12 application.

"inlineStyleLanguage":"scss"

Go through the following article to understand the implementation of Inline Sass Styles in Angular 12 application: http://www.techtutorhub.com/article/Implementing-Inline-Sass-Styles-in-Angular-12-application/104

4. Migrating Legacy i18n Message IDs:

Angular 12 allows to use new available tools to migrate any old localization IDs to new IDs which uses latest algorithm. We can use localize-extract script option to locate Legacy Message IDs in the application, the second option we can use is Angular CLI to locate Legacy IDs in the application. refer the guide to migrate the message Ids: https://angular.io/guide/migration-legacy-message-id

5. Strict Mode is now default in the new application

Strict Mode is now by default enabled in CLI, Strict Mode in Angular helps to detect the errors ahead of time. Strict Mode helps to refactor code more precisely when we are upgrading Angular Version to Latest version.

6. Support of IE 11 is Deprecated : 

IE 11 was restricting Angular from taking advantage of new features of Web Platform, so after taking the feedback from the Angular community, support for IE 11 is now removed from Angular 12. See the RFC for IE 11 Deprecation and Removal here: https://github.com/angular/angular/issues/41840

7. The Future of Protractor:

Protractor is the end-to-end testing framework that works with Angular. Currently, Angular team is deciding on the future of Protractor whether to use it or not, the feedback shared by the community will be reviewed to decide on the future of Protractor, see the RFC.

Angular team will be deciding on how to provide reliable integration with other third Party solutions that will provide more support such as cross-browser testing of the application.

8. Learning Angular Improvement:

Angular team worked on improving the Angular learning experience, Angular team wrote Content Projection Guide to create reusable components, you can refer the Content Projection Guide from: https://angular.io/guide/content-projection

To know in details about all the improvement and new features in the Angular 12, refer the Angular Blog at: https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49