The latest update of Google’s popular TypeScript-based web framework has been launched on the 12th of May, 2021 and is currently accessible as a production release. Among different enhancements, the upgrade deprecates the inheritance View Engine assemblage and delivering pipeline for the more current Ivy technology. While current version Angular 11 was launched on November 11, 2020, carrying improvement to composing of regular lines and bug fixes that guarantee TestBed isn’t started up after the override provider; It presents updates across the stage including the structure, the CLI, and components. The angular latest version follows similar upgrades with the contribution of stricter types and better router performance.

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:

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.

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 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. 

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:

• 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:

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.

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.

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. – courtesy