Angular v12 is now available

Photo of Alamo Square Park in San Francisco by Minko Gechev

It’s that time again, friends — we’re back with a new release and we can’t wait to share all the great updates and features waiting for you in Angular v12.

Before we dive into those updates, let’s check in on the Angular journey. A vital key to Angular’s future is Ivy and what it unlocks for the platform. We have been working over recent releases towards the goal of converging the Angular ecosystem on Ivy. We like to call this approach “Ivy Everywhere”.

Here are the changes we are making to enable this transition.

Moving Closer to Ivy Everywhere

The key moment in the next evolution of Angular has finally arrived — we are finally deprecating View Engine. This is what it means for the community.

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

We wrote a blog post providing details about this change and what it means for library authors and more.

Transitioning from Legacy i18n Message IDs

Currently, there are multiple legacy message id formats being used in our i18n system. 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. 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 for example.

Since v11, new projects are automatically configured to use the new message ids and we now have tooling to migrate existing projects with existing translations. Find out more here.

The Future of Protractor

The Angular team has been working with the community to determine the future of Protractor. We’re currently reviewing the feedback shared in the RFC. We’re still figuring out the best future for Protractor. We’ve opted to not include it in new projects and, instead, provide options with popular 3rd party solutions in the Angular CLI. We are currently working with Cypress, WebdriverIO, and TestCafe to help users adopt the alternative solutions. More information to come as this develops.

Nullish Coalescing

The nullish coalescing operator (??) has been helping developers write cleaner code in TypeScript classes for a while now. We’re thrilled to announce that you can bring the power of nullish coalescing to Angular templates in v12!

Now, in templates, developers can use the new syntax to simplify complex conditionals. For example:

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

Becomes:

{{ age ?? calculateAge() }}

Give this a try today and let us know what you think!

Learning Angular

We’re always working to improve the Angular learning experience for developers. As part of this effort, we have made some meaningful changes to our documentation. We wrote a content projection guide, with more new content in the works.

But there’s more to this story. We’ve gotten lots of feedback and questions asking how you can help us improve documentation. Great news, we’ve updated angular.io with a contributor’s guide that will help people looking to improve the docs. Check it out and help us make the docs better.

One more thing here — since our last major release, we’ve included guides and videos for error messages. The community has found this to be incredibly helpful so if you haven’t seen them, definitely check them out!

Stylish Improvements

Starting in v12, Angular components will now support inline Sass in the styles field of the @Component decorator. Previously, Sass was only available in external resources due to the Angular compiler. To enable this feature in your existing applications add "inlineStyleLanguage": "scss” to angular.json. Otherwise, it will be available to new projects using SCSS.

In the v11.2 release, we added support for Tailwind CSS. To get started using it in projects: install the tailwindcss package from npm and then initialize Tailwind to create the tailwind.config.js in your project. Now, teams are ready to start using Tailwind in Angular.

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.

Additionally, both Angular CDK and Angular Material expose a new Sass API surface designed for consumption with the new @use syntax. This new API surface provides the same features, but with more meaningful names and more ergonomic entry points. All of the guides on material.angular.io have been fully rewritten to showcase this new API surface, as well as provide more detailed explanations of theming concepts and APIs.

When updating to v12 your app 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. Here’s an example of the before and after.

More Great Features

Let’s take a look at some of the other great updates that have made it into this release:

• Running ng build now defaults to production for new v12 projects which saves teams some extra steps and helps to prevent accidental development builds in production! It is important to note that this is only for new projects. The Angular tooling does not perform any automatic migrations. If you would like to try using the optional migration tools you can via:

ng update @angular/cli — migrate-only production-by-default

• Strict mode is enabled by default in the CLI. Strict mode helps catch errors earlier in the development cycle. Learn more about strict mode in the documentation and find the original announcement on our blog.
• 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. Check
  out this video tour to learn more.
• In the v11 update we added experimental support for Webpack 5. Today, we’re happy to announce that we’re releasing a production ready version of Webpack 5 support in Angular.
• We’re also updating the supported TypeScript version to 4.2 — check out this post for more details on what is included.

Deprecating Support for IE11

Angular is an evergreen platform, meaning that it stays up-to-date with the evolving web ecosystem. Removing support for legacy browsers allows us to focus our efforts on providing modern solutions and better support to developers and users.

We are going to start including a new deprecation warning message in Angular v12 — and remove support for IE11 in Angular v13.

You can view our decision rationale by going to this RFC.

Support From the Community

The Angular community has been hard at work improving the Angular experience for everyone by contributing to the framework — thank you! Here are some of the PRs that have been landed thanks to your incredible work:

• Avoid ngZone from throwing a navigation-related warning unnecessarily (#25839)
• HttpClient supports specifying request metadata (#25751)
• min and max Forms validators added (#39063)
• Support APP_INITIALIZER work with observables (#33222)

Conclusion

The Angular team has been hard at work serving the community in many areas. Be sure to follow us on Twitter for updates and on our revamped YouTube channel for fresh new content.

Which feature are you most excited about for v12? Comment on this post and let us know.

Thank you so much for being a part of the incredible Angular community. Until the next time, go build great apps!