Angular v12 Is Now Released And Available

Angular team has announced that the Angular v12 Is Now Released And Available. Below mention are the changes you will find in a newer version of angular.

Angular v12: Ivy Everywhere

Angular v12 has finally deprecated the View Engine. The community has been working over recent releases towards the goal of converging the Angular ecosystem on Ivy. They call this approach “Ivy Everywhere”.

• As the View Engine is deprecated, so it will be removed in a future major release.
• Current libraries are using View Engine and it will still work with Ivy apps (no work is required by developers), but library authors should start planning to transition to Ivy.

Migrating Away from Legacy i18n Message IDs

There are multiple legacy message-id formats being used in the i18n system currently. The legacy message-ids are fragile as they can rise a problem based on whitespace and the formatting templates and ICU expressions. To solve this problem they have migrated away from it.

The new canonical message-id format is much more resilient and intuitive. This format will reduce the unnecessary translation invalidation and associated retranslation cost in applications where translations do not match due to whitespace changes.

Protractor: Planning for Future

The Angular team has been working with the community to determine the future of Protractor. They are currently reviewing the feedback shared in the RFC.

They are still figuring out the best future for Protractor. It has opted to not include it in new projects and, instead, provide options with popular 3rd party solutions in the Angular CLI.

The team currently working with Cypress, WebdriverIO, and TestCafe to help users adopt alternative solutions. More information to come as this develops.

Nullish Coalescing

The nullish coalescing operator (??): It has been helping developers write cleaner code in TypeScript classes for a while now. In the Angular 12 version, you can bring the power of nullish coalescing to Angular templates.

For example:

<div>{{total !== null && total !== undefined ? total : calculate() }}</div>

Becomes:

<div>{{ total ?? calculate() }}</div>

Improvements In Styling

• In Angular v12, Components will have support for inline Sass in the styles field of the @Component decorator. Previously, Sass was only available in external resources due to the Angular compiler. You can enable this feature in your existing applications by just adding "inlineStyleLanguage": "scss” to angular.json. Otherwise, it will be available to new projects using SCSS.
• Angular CDK and Angular Material have internally adopted Sass’s new module system. If your application uses Angular CDK or Angular Material, you’ll need to make sure you’ve switched from node-sass to the sass npm package. The node-sass package is unmaintained and no longer keeps up with new feature additions to the Sass language.
• When updating your app to v12 It will automatically switch to the new Sass API by updating your application with ng update. This command will refactor any Sass @import statements for Angular CDK and Angular Material code over to the new @use API, as both Angular CDK and Angular Material expose a new Sass API surface designed for consumption with the new @use syntax. Here’s an example of the before and after.

Build and Compilation Updates

• Running ng build will now set production environment as defaults to which saves teams some extra steps and helps to prevent accidental development builds in production.
• Now Strict mode will be enabled by default in the CLI. Strict mode helps catch errors earlier in the development cycle. ( Blog post on strict mode )
• The Ivy-based Language Service is moving from opt-in to on by default. The Language Service helps to boost your productivity when building apps by providing great features such as code completions, errors, hints, and navigation inside Angular templates.
• It also updated the supported TypeScript version to 4.2
• A production ready version of Webpack 5 now support in Angular v12

Support For IE11 Has Been Deprecated

An update will start including a new deprecation warning message in Angular v12 — and remove support for IE11 in Angular v13.

Links

Release Date: May 13, 2021
Release Note: Angular 12.0.0