Angular v12 Update – All you Need to Know

The latest update of Angular was released on May 12. It’s got a bunch of major changes that are essentially facilitating the Angular ecosystem’s transition to Ivy. They are calling it “Ivy Everywhere”. Deprecation of IE11 support along with other changes were also announced. 

Let’s check out all these changes-

What is “Ivy Everywhere” 

It means that the ‘View Engine’ will now be excluded in future releases. Existing libraries on View Engine will however still work with Ivy apps. It is supported for now but it’s only a matter of time, so it is advised that library authors start working on the transition to Ivy. 

New Canonical message ID format

According to Angular’s official blog, the team is ditching the legacy message ID formats for a new canonical message ID. A conical message Id is more resilient and intuitive as compared to multiple IDs in the i18n system. 

According to Angular.io

“These legacy message-ids are fragile as problems can arise based on whitespace and the formatting templates and ICU expressions. To solve this problem we’re migrating away from them. This format will reduce the unnecessary translation invalidation and associated retranslation cost in applications where translations do not match due to whitespace changes for example.”

Protractor Pushed Further

The community-driven end-to-end testing framework was given a pass for this release. The angular team is currently working with Cypress, WebdriverIO, and TestCafe to help users adopt alternative testing frameworks until the protractor becomes a part of a future release. 

Nullish Coalescing in Angular 12 

The Nullish coalescing operator is great for clean coding in Typescript classes. It has also made its way to Angular 12 templates to simplify complex conditionals. 

For example:

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

Becomes:

{{ age ?? calculateAge() }}

Stylish Enhancements

  • Angular components now support inline Sass in the styles field of the component decorator. 
  • You can add inlineStyleLanguage”: “scss” to angular.json to enable this feature, otherwise it’s available by default for new projects using SCSS.
  • Angular CDK and Angular Material now use Sass’s new module system. node-sass is no longer maintained, hence ensure that you’ve switched from node-sass to the sass npm package. 

Other Notable Features

  • Angular now supports Webpack 5
  • ng build now defaults to production
  • By default Strict mode is now enabled in the CLI.
  • Language service is also included as a default in the new update
  • Typescript version support updated to 4.2
  • Angular v12 will now show a deprecation warning for IE11 and it plans to end support with Angular v13

Conclusion

It’ll be exciting to see how all these new changes unfold and what Ivy has in store for the Angular v12 platform. With the focus converging towards more modern solutions and an evolving ecosystem, Angular v12 is doing away with certain features while adopting new ones. It’ll only help them better focus on what matters and provide better support to developers and users in the process.


Our Angular team here at Galaxy is also looking forward to testing how migrations and new projects on Angular 13 will turn out. If you’re in the market for Angular development partners then get in touch with us here and let’s discuss your project.

Share

Stay up to date with latest happenings in our space