What’s New with Angular 12? Top Features to Know!

Angular 12 is the latest release in the market. It is Google’s popular TypeScript-based framework. This update includes a lot of bug fixes, performance improvements, and features. Google brings in a major version release every six months. We will be discussing some necessary changes introduced in this update. If you are dealing with AngularJS development, it is vital to give it a read and know the necessary changes for your project. 

What are the Latest Features Introduced in Angular 12?

1. Ivy Everywhere 

They are now finally depreciating the View engine and evolving Angular. The view-engine will be removed from the major releases in the future. The current libraries that work with the view engine will still be working with the Ivy app. The library authors should prepare to move towards Ivy. 

2. New Form Validators are introduced 

It now has the min and max validators. Earlier, these attributes were defined on the:

<input type = “number”>

This was ignored in the forms module. Now the presence of these would trigger the validation logic on min and max. 

3. Removal of unused methods from DomAdapter

This is available in all Angular applications. The Angular 12 has removed some methods that were not used. The below methods are removed:

• getProperty
• supportsCookies 
• log
• getCookie
• logGroup and logGroupEnd
• getLocation and getHistory
• performanceNow

While supportsDOMEvents have been changed to read-only property and the remove does not return the removed node. 

4. Metadata interceptors and requests 

You might want to know the best time to use AngularJS with the latest updates in the market. The HttpClient can utilize the store and recover custom metadata for each request. This Angular version 12 is helpful for the HTTP interceptors. The capacity can now be utilized through the new HttpContext.  

5. Switch from the i18n 

Developers do not have to be cautious about using the legacy message ID formats like format templates, whitespaces, or ICU expressions. The Angular version 12 is more resilient with the ID format, minimizing the retranslation and invalidation cost. Now, with Angular 12, you have essential tools that help in migrating the translations. 

6. Protractor 

The team has put effort into deciding the fate of the protractor. Developers have chosen to exclude this feature in the new tasks. With Angular Version 12, developers work with Cypress, TestCafe, and WebdriverIO to get elective solutions.  They are exploring the famous third-party solutions available in Angular CLI. 

7. Nullish Coalescing 

The Angular 12 version provides the nullish coalescing operator (??) to enable a cleaner code for the conditionals. Upgrade your Angular version to make the process of adding conditional statements quicker and simple. For example:

Before:

{{ age !== null && age !== undefined ? age:calculateAge() }}

After: 

{{ age ?? calculateAge() }}

8. Style Improvements 

There are some vital improvements introduced with Angular 12. Some of them are:

• The Angular components now provide support to inline Sass. Earlier it was available for external resources. You can enable it by adding:

“inlineStyleLanguage” : “scss” to angular.json file.

• Provides support to the Tailwind CSS from the v11.2
• The Angular Material and Angular CDK have adopted the new Sass module system internally 
• The ng update will automatically switch your project into the new Sass API if you plan to update your Angular platform. 8. Strict Mode by Default 

9. Strict Mode by Default 

Angular 12 has enabled the strict mode by default in the CLI. This improves the maintenance and helps in assisting to catch bugs at an early stage. The Strict mode in Angular 12 applications is simple to examine and help securely update the ng update command refactor code.

To create a new workspace and application, you can use:

ng new [project-name]

Run the below command while creating a new app with an existing non-strict workplace into strict mode:

ng generate application [project-name] – -strict

10. Improvement in the type Alias 

Earlier, TypeScript did not resolve the type efficiently. In many cases, it will return the right types but not the substantial valid alias. Now, the re-aliasing is reliably received and shown in the new type alias. 

Before updating your platform, there are some vital things that you must know about AngularJS.

What are the Minor Updates with Angular 12?

• Now you get support for the compiler during transformation in a component style resource
• With this update, Angular has improved support for HMR (Hot Module Replacement)
• The ng_package will no longer generate minified UMDs anymore. 
• Improvements in the reporting and logging which means better CLI readability 
• Updates in the roadmap to letting developers stay informed about the priorities 
• The AngularJS developers have added harnesses for all the components
• Experimental support to the Webpack 5 with the introduction of a new module federation feature
• Migration of opt-in service to default Ivy-based language service 
• Update the TypeScript support of version 4.2
• Now permission to implement the custom router outlet 

Few Takeaways

The angular community has put great efforts and time into providing more control to the developers. They have come up with some breaking and major changes with Angular 12. Never miss an update! Reach us now! To run your web apps effortlessly and aim for better targets with AngularJS.

Tarun Bansal

October 14, 2021