Angular 12 is the latest upgrade to Google’s popular TypeScript-based web framework that arrived on 12th May 2021. It’s currently available as a production release, though. You can probably guess that it brought many new things to the table, as is the custom of the creators of Angular. Among all the enhancements, Angular 12 denounces the inheritance assemblage of View Engine and delivers pipelines for the more recent Ivy tech.

1. Angular 12 Brought
Several New Features To
The Table

2. Table of Contents
1) The “Ivy Everywhere” approach
2) Planning for the future of Protractor
3) Shifting from legacy i18n message IDs
4) Styling enhancements
5) Nullish coalescing
6) Community support
7) Support deprecation for IE11
8) Production build
9) Strict
10) New dev tools
11) Typescript 4.2
12) Angular
13) Final considerations
2

3. 1. The “Ivy Everywhere” approach
With the arrival of Angular 12, the View Engine is finally on its way out. The developer community of
Angular has been working on ongoing deliveries in an attempt to combine the ecosystem of the
framework with Ivy. They describe this methodology using the term “Ivy Everywhere.” With the
denunciation of the View Engine, you can expect it to be absent from future releases too. Also, as
already mentioned earlier, the present libraries are using the View Engine, and in any case, it will work
with Ivy applications. Nevertheless, library authors should initiate the transition to Ivy.
3

4. 2. Planning for the future of Protractor
The creators of Angular have been partnering with the developer community to decide what to do with
the Protractor. At the moment, these people, along with the providers of angular development services
are exploring the feedback shared in the RFC and ascertaining the future for Protractor. It’s one of the
newest features introduced by Angular 12. The team chose to refrain from including it in new tasks.
Instead, they want to furnish the alternatives with popular third-party solutions in the CLI of Angular.
Currently, the team is working with TestCafe, WebdriverIO, and Cypress to assist the best providers of
angular development services with elective solutions. More information will be available on this matter
as the development procedure continues.
4

5. 3. Shifting from legacy i18n message IDs
At the moment, specialists are utilizing various legacy message-ID designs in the i18n framework. Now,
these message-IDs are somewhat delicate because specific problems can emerge that depend on
whitespace, the organizing formats, as well as the ICU expressions. The creators of Angular and the
developer community are relocating away from them to fix this issue. The latest design of standard
message-ID made it significantly tougher and more natural. It’s a unique configuration that can reduce
the superfluous translation invalidation and associated retranslation expenses in applications where the
translations don’t coordinate.
5

6. 4. Styling enhancements
With Angular 12, developers can make use of Components because they’ll get support for inline Sass in
the styles field of the @Component decorator. Sass was already accessible from outside resources due
to the Angular compiler. Now, you can authorize this component in every current application just by
adding “scss” and “inlineStyleLanguage” to angular.json. It will also be accessible to new tasks using
SCSS. Both Angular Material and Angular CDK adopted the new module framework of Sass internally. If
your application uses Angular Material or Angular CDK, you have to make sure to change it from
node-sass to the sass npm package. The node-sass package is now derelict and will no longer be aware of
new additions to the features included in the Sass language. When it comes to updating an application to
the latest version of Angular, it will change to the new API of Sass by refreshing the application with an
ng update. Through this order, developers can re-factor any Sass @import expressions for Angular
Material and Angular CDK code to the latest @use API. After all, both Angular Material and Angular
CDK will unearth another Sass API surface designed to use with the new @use structure of the
language.
6

7. 5. Nullish coalescing
Whenever you hire an angular developer, you’ll notice him/her using the nullish coalescing operator (??).
It has been assisting developers with the task of writing cleaner code in TypeScript classes for quite
some time. The main highlight of this feature, among several others, is that it lets a developer bring the
power of nullish coalescing to the templates of Angular in the latest version. At the moment, in
templates, developers can utilize the new syntax structure to augment the complex conditionals.
7
6. Community support
The Angular team has been doing its job diligently in a bid to enhance the experience Angular has to
offer to every user by adding to the structure. They are attempting to improve the learning experience
of Angular for developers continuously. As part of the newest features introduced by Angular 12, the
community rolled out several profound improvements to the documentation. They also managed to
update the angular.io contributor’s guide that will support individuals aiming to augment the docs.

8. 8
7. Support deprecation for IE11
You don’t have to hire an Angular developer to know that this framework is evergreen. Since the arrival
of the first version of this framework, it has been on the same page with the advancements in web
ecosystems. By eliminating support for legacy browsers, Angular specialists provide cutting-edge
modern solutions and all-inclusive support to clients and developers. The creators of Angular also added
a new deprecation warning message as another feature. Once Angular 13 will be ready for launch, they
will eliminate support for IE11 entirely.
8. Production build
Up until now, running the ng build command made improvements towards development builds. With the
twelfth version of Angular, the ng build will go to a production build by default. In other words, it will
support several groups to abstain from building and conveying development builds tragically to
production environments.

9. 9
9. Strict
The earlier versions didn’t have it, but Angular 12 enabled the strict mode by default in the CLI as one of
the features. This mode increases maintainability and assists developers in pinpointing bugs during the
earliest stages of the process. Furthermore, the strict mode applications tend to be much simpler to
examine statically and can enhance the security and accuracy if the ng update command refactor code
while updating to the latest version of Angular.
10. New dev tools
Within a few days after the release of the twelfth installment of Angular, the community reported the
accessibility of Angular Dev Tools for Google Chrome. It’s possible to use the embedded profiler to
preview and record the change-detection events. Developers can now monitor them to ensure which
detection cycle and components took the longest time. Previously, the Angular community had to resort
to semi-official Dev Tools that weren’t compatible with Ivy. Rest assured, it will be a win-win situation
for everyone.

10. 10
11. Typescript 4.2
Another one of the most noteworthy updates in the features of Angular 12 is the support for Typescript
4.2. The most stable version appeared on 23rd February. There are several exciting features and unique
changes in this version.
12. Angular Universal
One of the most significant improvements of the Angular 12 features in Inline critical CSS that’s by
default in the nguniversal/common. Angular universal can now support proxy configuration in
ssr-dev-server builder. The schematics also received updates to use defaultConfiguration. This version
supports an SSR engine called “Clover,” along with a new engine that appears exceptionally promising.
The ultimate purpose of this new engine is to simplify things to generate application shells without any
extra builds. It can even remove the requirement for multiple builds for SSR/prerender.

11. 11
Final considerations
It’s safe to say that Angular 12 brought forth a pile of improvements to enhance performance, compiler,
language service, form validation, and so much more. It’s also worth mentioning here that many more
features need exploration. Time is the only thing that the developers need.
Original Source: https://www.moontechnolabs.com/blog/angular-12-brought-several-new-features-to-the-table/

12. Thank You!