The latest update of Google's popular TypeScript-based web framework Angular v12 has been released 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.
History of angular’s versions and LTS Support
| Version | Status | Released | Active Ends | LTS Ends |
|---|---|---|---|---|
| ^12.0.0 | Active | May 12, 2021 | Nov 12, 2021 | Nov 12, 2022 |
| ^11.0.0 | LTS | Nov 11, 2020 | May 11, 2021 | May 11, 2022 |
| ^10.0.0 | LTS | Jun 24, 2020 | Dec 24, 2020 | Dec 24, 2021 |
| ^9.0.0 | Not Supported | Feb 06, 2020 | ||
| ^8.0.0 | Not Supported | May 28, 2019 | ||
| ^7.0.0 | Not Supported | Oct 18, 2018 | ||
| ^6.0.0 | Not Supported | May 04, 2018 | ||
| ^5.0.0 | Not Supported | Nov 01, 2017 | ||
| ^4.0.0 | Not Supported | Mar 23, 2017 | ||
| ^2.0.0 | Not Supported | Dec 16, 2016 | ||
| ^1.0.0 | Not Supported | Oct 20, 2014 |
Angular version 12 is accessible on GitHub, following various beta deliveries and release candidates. Angular 12 draws nearer to an "Ivy all over" vision for the structure. Ivy is portrayed as a cutting-edge gathering and delivering pipeline, offering quicker AOT compilation. The Angular group noticed that View Engine will be taken out in a future delivery. Current libraries utilizing View Engine will in any case work with Ivy applications. however, library creators are encouraged to begin transitioning to Ivy.
The legacy version of Angular 11 was launched on November 11, 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?
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".
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.
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.
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() }}
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);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.
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.
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] --strictUp 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.
Angular 12 features a number of upgrades around its HTTP support. Let's have a look:
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.
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 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) {
...
}
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.
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.
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.
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.
Read More: Should you setup new Angular project with Angular 11 or Angular 12
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.
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;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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 Check our quick guide on how to update your Angular application to the latest version
Angular 12 has arrived with a pile of improvements to its performance, language service, compiler, form validation, and much more. The deprecation of the View engine and incorporation of the Ivy ecosystem is certainly one of the major enhancements considered in version 12. Along with this, Angular 12 has witnessed improvement in styling, Nullish Coalescing, and shifting from Legacy i18n Message IDs as some other important features that make this release a stable one. Additionally, Angular 12 features a variety of bug fixes, affecting the compiler, core, router, language service etc.
The Angular Roadmap Project's focal point is a 'Zoneless Angular' making Zone.js choices and at last, gives more control to the developers. Angular community has released its beta versions in the last two months and came up with some major and breaking changes in the month of May. With the looks of it, the Angular latest stable version is here to stay for a long time, however, we have our hopes high for what new the Angular team will surprise us within the coming days.
Read More: Angular 12.2 Promises A Speed Boost
This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.
