New Features Of Angular 12

 Latest Features of Angular 12

Table of contents:

 Ivy Everywhere: Angular v12 

Migrating from legacy i18n message IDs

 Protractor: planning for future 

Nullish Coalescing 

Improvements in styling 

Deprecating support for IE11 

Support from the Community 

Breaking changes in Angular 12

There are a few other new changes in the system, other than the router performance upgrades, and stricter sorts, which is added for DatePipe and number lines to get misuses, like passing an array at an accumulated time. So let's learn what's new in Angular 12?

Ivy Everywhere: Angular v12

The View Engine has finally been deprecated in Angular version 12.  The community has been working over ongoing deliveries towards the objective of combining the Angular ecosystem on Ivy. They call this methodology "Ivy Everywhere". 

• Since the View Engine is deprecated now, it will be eliminated in future significant releases as well.
• Current libraries are utilizing View Engine and it will in any case work with Ivy applications (no work is needed by designers), yet library authors should begin wanting to transition to Ivy.

Migrating from legacy i18n message IDs

As of now, there are different legacy message-id designs being utilized in the i18n framework. These legacy message-ids are delicate as issues can emerge dependent on whitespace and the organizing formats and ICU expressions. To tackle this issue the Angular team is relocating away from them. The new standard message-id design is considerably more tough and natural. This configuration will diminish the superfluous translation invalidation and related retranslation cost in applications where translations don't coordinate due to whitespace changes for instance.

Since Angular version 11, new tasks are naturally designed to utilize the new message ids and they presently have the tooling to move existing ventures with existing translations.

Protractor: planning for future

The team has been working with the community to decide the eventual fate of the Protractor. They are right now exploring the feedback shared in the RFC and sorting out the best future for Protractor. This is one of the latest features of Angular 12. The team have chosen to exclude it in new tasks and, all things considered, furnish alternatives with famous 3rd party solutions in the Angular CLI. The team is presently working with Cypress, WebdriverIO, and TestCafe to assist angularjs development company with receiving elective solutions. More data to come as this develops.

Nullish Coalescing

The nullish coalescing operator (??) has been assisting engineers with composing cleaner code in TypeScript classes for some time now. One of the main highlights of this feature is that you can bring the force of nullish coalescing to Angular templates in v12!

Presently, in templates, engineers can utilize the new syntax structure to improve the complex conditionals. For instance:

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

Improvements in styling

In Angular v12, Components will have support for inline Sass in the styles field of the @Component decorator. Already, Sass was just accessible in outside resources because of the Angular compiler. You can empower this component in your current applications simply by adding "inlineStyleLanguage": "scss" to angular.json. Else, it will be accessible to new tasks utilizing SCSS.

Angular CDK and Angular Material have adopted Sass' new module framework internally. If your application utilizes Angular CDK or Angular Material, you'll need to ensure you've changed from node-sass to the sass npm package. The node-sass package is unmaintained and no longer stays aware of new feature additions to the Sass language.

While updating your application to the angular latest version, It will consequently change to the new Sass API by refreshing your application 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 intended for utilization with the new @use language structure. Here's an illustration of the 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);

Deprecating support for IE11

Angular is an evergreen platform, implying that it keeps up with the advancing web ecosystem. Eliminating support for legacy browsers permits us to focus on giving modern solutions and better help to engineers and clients. The team has also included a new deprecation warning message as another Angular 12 feature — and eliminate support for IE11 in Angular v13.

Support from the Community

The Angular team has been working diligently for improving the Angular experience from angular versions 6,7,8 & 9 for everybody by adding to the structure. They are continually attempting to improve the Angular learning experience for developers as well. As a part of Angular 12 new features, they have rolled out some significant improvements to their documentation. They have also updated the angular.io contributor's guide that will help individuals hoping to improve the docs.

Strict by default

The strict mode of Angular has now been enabled by default in the CLI as one of the features of  Angular 12. 

Strict mode improves maintainability and assists you with catching the bugs early in the process. Moreover, strict mode applications are simpler to statically examine and can help the ng update command refactor code more securely and accurately when you are updating to the latest versions of Angular. 

Use the following command to create a new workspace and application: 

ng new [project-name]

Run the following command when you want to create a new app within an existing non-strict workspace in the strict mode:

ng generate application [project-name] --strict

Production build by default

Up to this point, running the ng build command made an improvement towards a development build. In Angular version 12, ng build will default to a production build. Ideally, it will assist a few groups with abstaining from tragically building and conveying development builds to production environments. 

HTTP improvements

Angular 12 features a number of upgrades around its HTTP support. Let's have a look:

Metadata for requests and interceptors

To start with, the HttpClient would now be able to be utilized to store and recover custom metadata for requests. This is especially helpful for HTTP interceptors. This capacity can be utilized through the new HttpContext.

Presently, the distinctive HTTP strategies given by HttpClient incorporate another specific circumstance: HttpContext alternative, which we can use to pass in a map.

appendAll on HttpParams

The HttpParams class presently has another appendAll technique, which can be utilized to effortlessly add a bunch of boundaries without a moment's delay:

appendAll(params: {[param: string]: string|string[]}): HttpParams 

HttpStatusCode

Angular 12 features its own list of intelligible names for HTTP status codes, in the form of a const enum. Because of this new element, we can now utilize HttpStatusCode instead of introducing our own solution to have human-readable names

For Example:

 if (response.status === HttpStatusCode.Ok) {
 ...
}

ng API improvements

The ng troubleshooting API that we can use from the program dev tool is an improved feature of Angular 12. There are a few functionalities that have been implemented namely getDirectiveMetadata and esetProfiler to debug APIs for structural inspection of applications. The getDirectiveMetadata can be utilized to recover data about parts and directives. The esetProfiler can be used to trace template creation durations, lifecycle hooks processing, and template updates. The API can give an insight into the working of the applications at runtime. 

New Dev Tools

A couple of days after the release of Angular 12, the Angular group has reported the accessibility of Angular Dev Tools for Google Chrome. The embedded profiler can preview and record the change detection events which can be monitored as to which detection cycle and components took the longest time. Earlier the Angular community had semi-official Dev Tools which were not compatible with Ivy. So this is a win-win situation for all. 

Angular Universal

One of the major improvements of the Angular 12 feature is Inline critical CSS that is by default in the nguniversal/common. The Angular universal now supports proxy configuration in ssr-dev-server builder. It has also updated schematics to use defaultConfiguration. This version supports an SSR engine called Clover along with a new engine which seems promising. The new engine aims to simplify things to generate application shells without an extra build and remove the requirement for multiple builds for SSR/prerender. The version also supports TLS for the dev-server.

Typescript 4.2

One of the major updates in the feature of Angular 12 is the support of Typescript 4.2. The stable version was released on the 23rd of February. There are some exciting features and breaking changes in this version. Let’s find out the features of Typescript 4.2 and how this version will impact developers and Angular 12.

Changes in Tuple Types

Tuples are helpful datatypes in programming whenever developers need to return different outcomes from a function. As they're constant, tuples can use as keys for dictionary-type word reference. One of the vital highlights of TypeScript is that tuples can have discretionary and optional components and rest components, which is fantastic for readability and tooling.

Abstract Construct Signatures

Abstraction is one of the major features of TyepScript 4.2. TypeScript permits designers to utilize the theoretical modifier to check a class as abstract. To make occasions to extract properties and practices of abstract classes, engineers need to follow an essential OOP idea, which is to broaden the abstract class utilizing a subclass and startup objects. Mixins are one of the bleeding edge techniques for TypeScript, which is additionally identified with a similar subject.

Initially, while using mixins with abstract classes you could find some bugs. However, after version 4.2 developers can use the abstract modifier on constructor signatures.

 newConstructor: abstract new () => hasPrice = Candy;

Improvements for in operator

It is a mistake to utilize an essential variable on the correct side of an in-operator, an overall guideline in programming. Nonetheless, until version 4.2, it was not there in TypeScript.

However, with the new update, TypeScript is exacting to rules. So, the in-operator won't go to permit crude information types on the correct side.

“test var” in 31 // will immediately lead to an error.

Improved Type Alias

In past forms, TypeScript didn't resolve types effectively. In most scenarios, TypeScript will return the right types however not the substantial valid alias, prompting an absence of readability and repeat a similar code over and again. Currently, the re-aliasing of such kinds reliably receives and shows the new type alias.

Improvements to the compile process

When creating complex projects, at times it is difficult and tedious while looking for TypeScript file definitions. Mostly, it is a process of experimentation. However, with Typescript version 4.2, it is feasible to get names of documents that TypeScript finds as a piece of the project. Also, Typescript discovers explanations behind the documents to be important for the compilation process.

Webpack 5.37 support

Angular 12 features the production-ready experimental Webpack 5 support that was introduced in Angular 11.  Webpack is the vital piece of the Angular CLI puzzle, and it plays a major part in bundle size, constructs execution, and so on. Webpack 5 is a significant delivery which is as it should be. It incorporates various breaking changes and features. The webpack 5 helps in Improving the build performance, long-term caching, compatibility with the Web platform, bundle size with better code generation.

Breaking changes in Angular 12

Animation:

In Angular version 12 features the DOM components that are presently accurately eliminated when the root view is taken out. If you are utilizing SSR and utilize the application's HTML for delivery, you will be required to guarantee that you save the HTML to a variable prior to destroying the application.
It is additionally conceivable that tests could be unintentionally depending on the old conduct by attempting to discover a component that was not taken out in a past test. However, if that is the situation the failing tests ought to be updated to guarantee they have proper setup code which instates components they depend on.

Common:

Methods of the PlatformLocation class, specifically onPopState as well as onHashChange,used to return void. Presently those techniques return works that can be called to eliminate event handlers.

One of the main Angular 12 improvements is that the strategies for the HttpParams class currently acknowledged string | number | boolean rather than string for the value of a parameter. If you expanded this class in your application, you'll need to update the signatures of your strategies to mirror these changes.

Core:

Angular no longer helps in maintaining Node v10. Previously the ng.getDirectives work tossed an error when in case a given DOM node had no Angular setting related to it. This conduct was conflicting with other troubleshooting utilities under ng namespace, which took care of the present circumstance without raising an exemption. 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.

The type of the APP_INITIALIZER token has been changed to more precisely mirror the types of return values that are taken care of by Angular. Before this, each initializer callback was composed to return any, this is currently Promise <unknown> | Observable <unknown> | void.

In the unlikely event that your application utilizes the Injector.get or TestBed.inject API to infuse the APP_INITIALIZER token, you may have to refresh the code to represent the stricter type.

Compiler - CLI:

One of the most interesting features of Angular 10 was the use of the new IVY extractor to run ng x i18n in one of your applications. One of the new features of Angular 12  is that it no longer generates legacy i18n message-ids through linked libraries. For downstream applications providing translations for these messages, the localize-migrate command-line tool will help migrate their message ids.

Form:

Previously ‘min’ and ‘max’ attributes characterized on the <input type=" number"> were disregarded by the Forms module. Currently, the presence of 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 mirror that.

Platform browser:

XhrFactory has been moved from @angular/normal/http to @angular/normal.

/// Before
import {XhrFactory} from '@angular/common/http';
/// After
import {XhrFactory} from '@angular/common';

Router:
Strict invalid checks will give an account of part conceivably being invalid. The type of the RouterLinkActive.routerLinkActiveOptions input was extended to permit all the more adjusted control. Code that recently read this property may be updated to represent the new type.

Other minor updates in Angular 12

• Support is offered for the compiler to transform component style resources
• Angular 11 features enable HMR while initiating an application with ng serve --hmr where Angular version 12 has Improved support for Hot Module Replacement (HMR)
• Fonts automatic inlining
• Ng_package does not generate minified UMDs anymore
• Improved component tests harnesses introduced in Angular 9 for testing Angular Material components. The team has now added harnesses for all of the components!
• Improved logging and reporting as a result of better CLI readability
• Experimental support for Webpack 5 by introducing a new module federation feature
• Angular 12 has updated the roadmap to keep developers informed about the current priorities of the Angular team
• Migration of default Ivy-based Language Service from opt-in service
• Updated TypeScript support to version 4.2
• Introduction of a context option to the compiler-cli that allows supplying arbitrary data in a type-safe way
• Addition of more fine-tuned control  in routerLinkActiveOptions
• Permission for custom router outlet implementations
• Reduction of framework overheard by removing legacy

How to upgrade

Run the following command to update to Angular 12 from Angular 11. However, if you have Nx 12.3, note that it already supports Angular 12. 

 @angular/core@12 @angular/cli@12