It’s that time of the year, where the buzz is all about the new release, and we can’t wait to show you all the exciting new features and upgrades in Angular v12. Let’s take a look at the Angular journey before we get into those updates. Ivy and what it enables for the platform are critical to Angular’s future. There’s a lot of work that happened to transition the Angular ecosystem to Ivy over the last few versions. This strategy is branded as “Ivy Everywhere”.
The most recent version of Google’s renowned TypeScript-based web application framework was released on May 12th and is now available as a production release. The upgrade, among other things, deprecates the legacy View Engine assembling and delivery pipeline in favor of the more recent Ivy technology. Following many beta releases and launch candidates, Angular version 12 is now available on GitHub. Angular 12 gets closer to realizing the structure’s “Ivy all over” concept. Ivy is described as a cutting-edge data gathering and delivery pipeline that allows for faster AOT compilation. View Engine will be removed in a future release, according to the Angular team. Current View Engine libraries will function with Ivy apps in any event. Library creators, on the other hand, are urged to start using Ivy.
Let us understand more about the new features and focus points of Angular v12.
New Features of DevTools Angular v12
Getting closer to Ivy Everywhere
The pivotal moment in Angular’s growth has finally arrived: View Engine is being deprecated. This is what it entails for the neighborhood.
- View Engine will be deprecated and removed in a forthcoming major release.
- Current View Engine libraries will continue working with Ivy apps (developers will not need to do anything), but library authors must start thinking about switching to Ivy.
A transition from message ID’s of Legacy i18n
In the i18n system, we currently use a variety of old message-id types. These older message-ids are vulnerable due to ICU expressions, formatting templates, and whitespace that can cause issues. We’re moving away from them to address this problem. The new unique message-id format is substantially more dependable and user-friendly. In applications where translations do not align owing to whitespace alterations, for example, this format will eliminate needless translation invalidation and related retranslation expenses.
Protractor – The future
The Angular team has indeed been collaborating with the community to assess Protractor’s future. A review has been taking place on the feedbacks received from the RFC. They’re still finding out what Protractor’s best future looks like. It’s one of Angular 12’s newest features. The team has decided to exclude it from new jobs and, in the Angular CLI, to provide alternatives with well-known third-party solutions. The team is currently collaborating with WebdriverIO, Cypress, and TestCafe to help an angular js development firm obtain elective choices. As the situation progresses, more information will be provided.
Nullish Coalescing
For a long time, the nullish coalescing function (??) has aided engineers in writing clearer code in TypeScript courses. One of the most exciting aspects of this functionality is that you can now use nullish coalescing in Angular templates in version 12! Engineers can now use the new syntactic structure in templates to alleviate complicated conditionals. Consider the following example:
{{age !== null && age !== undefined ? age : calculateAge() }}
Can simply become
{{ age ?? calculateAge() }}
Learning Angular
The team was continually striving to improve the developer’s Angular learning experience. They’ve made some significant adjustments to the documentation as part of this work. Also, They wrote a content projecting guide and working on adding new stuff. But more to this story are comments and queries received by them about how one may assist them in improving documentation. Since the last big release, they introduced error message instructions and videos. This has proven to be beneficial, if you’ve not viewed them yet, do so!
Stylish Improvements
Components in Angular v12 will allow inline Sass in the @Component decorator’s styles field. Due to the Angular compiler, Sass was previously only available in external resources. Internally, Angular Material and Angular CDK use a new SaaS module framework. If you’re using any of both in your application, make sure you’ve switched from node-sass to the package of sass npm. The node-sass package is not maintained anymore and therefore is no more aware of current Sass language features. By refreshing the application using ng update, it will change to a new Sass API while upgrading your app to the newest Angular version. As both Angular CDK as well as Material expose another Sass API surface for usage with the new language structure @use, this order will rework any Sass @import statements and code over on the new @use API.
Finally, Angular 12 comes with a slew of a compiler, language service, performance, form validation, and other enhancements. One of the primary enhancements contemplated in version 12 is the deprecating of the View engine and adoption of the Ivy ecosystem. In addition, Angular 12 offers improved styling, Nullish Coalescing, and a transition from Legacy i18n Message-IDs, among other essential details that help this version stable. Angular 12 also includes several bug updates for the language service, core, router, compiler, and other components. The current version of Angular appears to stay around for a long time, but we have great hopes with what fresh the Angular team may surprise us in the days ahead.
