A Guide to Angular 14 Release Features and Updates

Angular 14 has officially been released! This version of angular contains many powerful features, such as typed forms, standalone components, and new primitives in the Angular CDK.

Angular 14 New Features

Simplifying Angular with Standalone Components

Standalone components aim to provide a simplified way to build applications by reducing the need for NgModules.  While they are ready for use, they are not a stable API and will potentially change outside Angular’s typical backward compatible model.  With standalone components, directives, and pipes, the standalone: true flag allows you to add imports directly in your @component() without an @NgModule().  This feature will continue to be built out in the coming months.

Typed Angular Forms

This feature aims to close Angular’s top Github issue:  implementing strict typing for the Angular Reactive Forms Package. Typed forms ensure that the values inside form controls, groups, and arrays are type safe across the entire API surface.  This enables safer forms, especially for deeply nested complex surfaces.

Streamlined Best Practices

Angular 14 is designed to deliver a truly convenient user experience, beginning with new change detection instructions on Angular; v14 includes tools that empower developers to build premium applications, from routing to your code editor to new modification detection instructions on Angular.

Streamlined Page Title Accessibility

Another recommended best practice is ensuring that your application's title pages are communicated distinctively.  The new Route.title attribute in the angular router in v13.2 eases this.  Now, adding a title does not leave any requirement for extra imports and is strongly typed.

Extended Developer Diagnostics

New extended diagnostics provide an extendable framework that gives you more insight into your templates and how you might be able to improve them.  Diagnostics give compile-time warnings with precise, actionable suggestions for your templates, catching bugs before run-time.

Banana-in-a-Box Error

A common syntax error that developers make is to flip the brackets and parentheses in two-way binding, resulting in ([]) instead of the desired [()].  The “banana” (parentheses) should go inside the “box” (brackets).  While it is a common error, it is still technically valid syntax.  The CLI acknowledges that while it is valid, it is a rare case.  In the v13.2 release, a detailed message on this mistake is given, as well as guidance on how to fix it within the CLI and code editor.

Catch Nullish Coalescing on Non-nullable Values

Extended diagnostics give rise to blunders with nullish coalescing operators (??) in Angular templates.   This is raised when the input is not nullable, meaning the type does not comprise null or undefined.  Extended diagnostics show warnings during ng build, serve, and in real-time with the Angular Language Service.  These diagnostics are configurable in tsconfig.json, where it can be specified whether to consider diagnostics a warning, error, or suppression.

Tree-shakeable Error Messages

This Angular 14 release contains new runtime error codes.  Strong error codes make debugging simple; This allows developers to build an optimizer to keep error codes while tree-shaking messages (long strings) from production bundles.  To detect the whole text while debugging a production problem, angular recommends visiting the Angular reference manuals and replicating the mistake in a development environment.

Typescript 4.7 Support

Angular 14 supports the current TypeScript 4.7 and now targets ES2020 by default, enabling the CLI to ship smaller code without needing down-leveling.

Bind to Protected Component Members

You can now bind protected component members directly from your templates; this gives you more control over the public API surface of your reusable components.

Optional Injectors in Embedded Views

Angular 14 adds support for passing an optional injector while developing an embedded view through ViewContainorRef.createEmbeddedView and TemplateRef.createEmbeddedView; the injector then enables the dependency behavior to be personalized within the specific template.

NgModel onPush

NgModel changes are now reflected in the UI for OnPush components.

New Primitives in CDK

Angular’s Component Dev Kit provides a suite of tools for building Angular components.  In 14, Angular is promoting the CDK Menu and Dialog to stable.  V14  features new CDK primitives that can be used to create accessible custom components based on the WAI-ARIA menu and menubar design patterns.

hasHarness and getHarnessOrNull in Component Test Harnesses

Angular 14 includes new methods for HarnessLoader to check whether a harness is present or not and returns the harness instance if present. 

Angular CLI Enhancements

In Angular 14, deprecated camel case arguments support has been removed, and support has been added for combined aliases usage.

ng

Completion

Angular 14 introduces real-time auto-completion for commands such as ng serve.  When errors are faced in the command line, typos are often a significant contributor.  To resolve this, Angular 14 launches ng completion and introduces real-time type-ahead completion.

Analytics

The CLI’s analytics command allows for control of analytics settings and printing of analytics information.  Detailed output efficiency clearly conveys your analytics configurations and provides the team with telemetry data.

Cache

Ng cache provides a way to control and print cache info from the command line.  It allows for enabling, disabling, or deletion from the disc and printing of stats and info.

What feature are you most excited about in Angular 14?