What’s new in Angular 12

Angular 12, the latest production release of Google’s popular TypeScript-based web framework, has received an update. Angular 12.1, arrived June 24, adds compiler support for shorthand property declarations as well as fixes for the compiler, compiler CLI, router, and service workers.

The Angular 12.1 point release also introduces APIs to opt into correct test teardown behavior. The compiler fixes pertain to issues such as unterminated interpolation and view restoration, while the service worker fixes pertain to the naming, accessing, and clean-up of service worker caches.

Published May 12, Angular 12 is available on GitHub, following numerous beta releases and release candidates. Angular 12 deprecates the legacy View Engine compilation and rendering pipeline in favor of the newer Ivy technology, a next-generation compilation and rendering pipeline that offers faster AOT (ahead of time) compilation.

The Angular team noted that View Engine will be removed in a future release. Current libraries using View Engine will still work with Ivy apps, but library authors are advised to start transitioning to Ivy.

Also in Angular 12, the Ivy-based language service, providing capabilities such as code completions and hints inside templates, moves from opt-in to on by default. Other new features and improvements in the version 12 release:

• To improve compiler CLI performance, incremental compilation is allowed in the presence of redirected source files.
• Nullish coalescing, to write clearer code in TypeScript classes, now works with Angular templates.
• Both Angular CDK and Angular Material expose a new Sass API surface designed for consumption with the new @use syntax. When updating to Angular 12, an app will automatically switch to the new API by updating via ng update.
• Tools are available to migrate legacy localization IDs to IDs using the latest algorithms.
• Components now support inline Sass in the styles field of the @component decorator.
• Running ng build now defaults to production, saving steps and helping to prevent accidental deployment of development builds.
• Strict mode, to catch errors earlier in the development cycle, is enabled by default in the CLI.
• The Webpack 5 module bundler is production-ready.
• Support for the IE11 browser has been deprecated.
• For the compiler, support is offered for transforming component style resources.
• For the language service, Angular property completions are provided only in templates.
• For the compiler-cli, a context option is introduced for any request that allows supplying arbitrary data in a type-safe way. This feature addresses the need to configure interceptors in HTTP client on a per-request basis.
• For animations, DOM elements now are correctly removed when the root view is removed. This is a breaking change.
• To improve performance, unused methods have been removed from DomAdapter.
• A new format is added to localize-extract, called legacy-migrate, to generate a JSON file that can be used to map legacy message IDs to canonical ones.
• Strict null checks will report on a fragment potentially being null. This is a breaking change.
• The type of the APP-INITIALIZER token has been changed to more accurately reflect the types of return values handled by Angular. This is a breaking change.
• Support has been added for disabling animations through BrowserAnimationsModulewithConfig.
• The emitevent option was added for FormArray and FormGroup. This is a breaking change.
• More fine-tuned control has been added in routerLinkActiveOptions.
• Custom router outlet implementations are permitted.
• Support has been added for TypeScript 4.2, and support for TypeScript 4.0 and TypeScript 4.1 has been dropped.
• Implementing the appendAll() method on HttpParams.
• For forms, min and max validators are being introduced.
• Exporting of a list of HTTP status codes.
• Addition of a feature to the Angular Language Service that enables accessing the locations for components that use a template file.
• The addition of diagnostics to suggest turning on strictTemplates, providing a way for the language server to retrieve compiler options diagnostics.
• A patch adding an API to retrieve the template typecheck block for a template, if any, at a file location, and selection of the TS node in the TCB corresponding to the template node at which the request for a TCB was made. This will help with debugging.

A variety of bug fixes also were featured, affecting the compiler, compiler-cli, Bazel build tool, the router, and other parts of Angular. A full list of changes can be found on GitHub. The previous Angular 11 line debuted as a production release in November.