Angular 12 Brought Several New Features To The Table

Angular 12 Brought Several New Features To The Table

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

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

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

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

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

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.

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.

7

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.

8

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.

9

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.

10

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/

11

Thank You!