What’s New In Angular 12?

Angular is Google’s TypeScript-based framework for building desktop and mobile web apps. The latest update of Angular has been launched on 12th May and is now accessible as a production release. With various improvements, the upgrade deprecates the inheritance Vie Engine assemblage and delivers a pipeline for more current Ivy technology. The new version Angular 12 draws nearer to an “Ivy all over” vision for structure. Ivy is depicted as a cutting edge gathering and delivering pipeline, offering faster AOT compilation. Current libraries using View Engine will work with Ivy applications. The angular latest versions follows similar upgrades with contributions of sticker types and better router performance. Let us see the new features in Angular 12 version. 

Know the angular best practices at- Top 10 Angular Best Practices To Follow In 2020

Features Of Angular 12-

1. Ivy Everywhere-

The View Engine has finally been deprecated in Angular 12. The angular community has been working over ongoing deliveries towards the aim to combine the Angular ecosystem on Ivy. It is called “Ivy Everywhere”. As the View Engine is deprecated, it will be eliminated in future releases also. Current libraries are using View Engine and it will in any case work with Ivy apps, yet library authors should start transition to Ivy.  

2. Deprecating Support For IE11-

Angular keeps it updated with an advancing web ecosystem. Removing the support for legacy browsers allows us to focus on giving modern solutions and better help to engineers and clients. Also, the team has included new deprecation warning message as  another Angular 12 feature- and remove support for IE11 in Angular v13.

3. Protractor: Planning For Future-

It is one of the latest features of Angular 12. The team has been working with the community to determine the eventual fate of the Protractor. Now, they are investigating the feedback shared in the RFC and figuring out the best future for Protractor. The team have decided to exclude it in new tasks and, it in new tasks, considering all alternatives with popular 3rd party solutions in the Angular CLI. Now, team is working with Cypress, WebdriverIO, and TestCafe to help angularjs development company with receiving elective solutions. More data to come as this develops.

4. Migrating From Legacy i18n Message IDs-

Legacy message-ids are delicate as issues can emerge dependent on whitespace and organizing formats and ICU expressions. To deal with this issue the Angular team is relocating away from them. New standard message-id design is more natural and tough. This configuration will reduce the superfluous translation invalidation and related retranslation cost in applications where translations don’t coordinate because of  whitespace changes. 

Since Angular version 11, new tasks are normally intended to use the new message ids and now they have the tooling to move existing tasks with existing translations.

5. Nullish Coalescing-

Nullish coalescing operator (??) helps developers to compose cleaner code in TypeScript classes for some time. Main focus of this feature is – you can bring the force of nullish coalescing to Angular templates in v12. Now, developers can use the new syntax structure to improve the complex conditionals. For instance:

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

6. Styling Updations-

In this new version, Components will have support for inline Saas in styles field of @Component decorator. Previously, Saas was accessible only in outside resources because of the Angular compiler. You cal allow this component in your apps by just adding “inlineStyleLanguage”: “scss” to angular.json. Otherwise it will be accessible to new tasks using SCSS. Angular CDK and Angular Material have adopted Sass’ new module framework internally. If app uses Angular CDK or Angular Material, you must ensure that you’ve changed from node-sass to the sass npm package.

Node-sass package is unmaintained and no longer stays aware of new feature addition to the Sass language. When you update your app to angular latest version, it will change to the new Sass API by refreshing app with ng update. This order will refactor any Sass @import expressions for angular CDK and Angular material code over to the new @use API, as both Angular CDK and Angular Material uncover another Sass API surface planned for use with the new @use language structure. Here’s an outline of the previously, then after the fact. Here’s an example of before and after.

Before-

@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);

AFTER

@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
 )
));
@include mat.all-component-themes($theme);

7. Community Support-

Angular team is continuously working to improve the Angular experience for developers. With Angular 12, they have made some improvements to their documentation. Also, they have updated the angular.io contributor’s guide that will assist individuals to improve the docs. 

8. Some Other Improvements-

Core-

As a major change in Angular 12, the ng.getDirectives work for such DOM nodes would bring about an empty array back from that function. Types of APP_INITIALIZER token has been changed to more precisely mirror the types of return values that are taken care of by Angular. Previous to this, every initializer callback was composed to return any, this is now Promise<unknown> | Observable <unknown> | void. In the unlikely event that your application uses the Injector.get or TestBed.inject API to infuse the APP_INITIALIZER token, you may need to refresh the code to address the stricter type. 

Compiler CLI-

In Angular CLI, it no longer generates legacy i18n message-ids through linked libraries. For downstream apps, that provides translations for these messages, the localize-migrate command-line tool will help to migrate their message ids.

Animation-

Angular 12 features the DOM components, that are now accurately eliminated when the root view is taken out. If you’re using SSR and use app’s HTML for delivery, you will need to ensure that you save the HTML to variable before destroying the app. Also it is possible that tests could be unintentionally relying upon the old conduct by attempting to discover a component that was not taken out previously. But, if that is the case the failing tests should be updated to ensure that they have appropriate setup  code which instates components they rely upon.

Common-

Main improvements in angular 12 is that the strategies for HttpParams class currently acknowledged string | number | boolean instead of string for the value of a parameter. If you expanded this class in your app, you’ll need to update the signatures of your strategies to show these changes.

Form-

Previously ‘min’ and ‘max’ attributes characterized on the <input type=”number”> were disregarded by Forms module. Now, these characteristics would trigger min/max validation logic (if formControl, formControlName or on the other hand ngModel orders are additionally present on a given input) and comparing form control status would show that.

Final Words-

Angular 12 came with improvements to its language service, performance, compiler, form validation and so on. Ivy ecosystem and deprecation of View engine are major improvements in Angular 12.