Ivy Everywhere
Deprecating view engine. It will be removed in 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.
Nullish Coalescing:
The nullish coalescing operator (??) has been helping developers write cleaner code in TypeScript classes for a while now. This will be part of angular templates starting from v12!
Now, in templates, developers can use the new syntax to simply complex conditionals. For example
{{age !== null && age !== undefined ? age : calculateAge()}}becomes
{{age ?? calculateAge()}}Stylish Improvements
Inline SCSS:
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 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.
Tailwind CSS:
In the v11.2 release, we added support for Tailwind CSS. To get started using it in projects: install tailwind css 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 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 new @use syntax. This new API surface provides the same features, but with more meaningful names and more ergonomic entry points. All of the guide 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 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 the new use API.
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.
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.
More features:
Lets take a look at some of the other greater updates that have made it into this release.
- Running ng build now defaults to production which saves teams some extra steps.
- Strict mode is enabled by default in CLI. Strick mode helps catch errors earlier in the development cycle.
- 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.
- Added support for webpack 5.
- We are also updating supported TypeScript version to 4. 2 — check out this post for more details on what is included.
