What’s New in Angular v16? A Deep Dive into the Latest Frontend Features

Angular v16 Overview

Last week Angular released version 16, bringing more features and changes than any previous major release (excluding the Angular‑to‑Angular 2 transition). The framework is experiencing a resurgence, and v16 marks the beginning of this revival.

Key New Features

Developer preview of a new reactivity model (Signals) with signal, computed, and effect primitives.

Improved server‑side rendering (SSR) and hydration that can reuse existing DOM nodes.

esbuild‑based Angular CLI builder preview, integrated with Vite for faster builds.

Standalone component, directive, and pipe migration tools.

Updates to Angular Package Format (APF) and removal of legacy APIs such as ReflectiveInjector and the compatibility compiler (ngcc).

Signals Developer Preview

The release includes the first developer preview of Angular Signals, offering signal, computed, and effect. Detailed guidance is available in the Signals guide.

Enhanced Hydration

Previously, Angular would discard the pre‑rendered DOM and re‑render from scratch. With the enhanced hydration preview, Angular can now reuse existing DOM nodes, improving performance. See the full hydration guide for details.

esbuild‑Based CLI Builder

v16 introduces an esbuild‑based Angular CLI builder preview that significantly reduces build times across scenarios and integrates with Vite for the development server.

"architect": {</code>
<code>  "build": {</code>
<code>    "builder": "@angular-devkit/build-angular:browser-esbuild",

Standalone Component Migration

Angular v16 adds migration schematics and a dedicated guide to help developers convert applications to use standalone APIs, reducing the effort required to migrate components, directives, and pipes. ng new --standalone When needed, mark component inputs as required:

export class ColorPicker {</code>
<code>  @Input({ required: true }) defaultColor: string;</code>
<code>}

Major Compatibility Requirements

Angular v16 requires Node.js v16 or v18 and TypeScript 4.9 or higher. Compatibility details are provided on the versions guide page.

Removed Features

Angular Compatibility Compiler (ngcc) is removed; libraries built with View Engine are no longer supported.

Flattened ESM 2015 (FESM2015) output is removed from the package format.

ReflectiveInjector and related symbols are removed; use Injector.create instead.

Router.createUrlTree Updates

The behavior of Router.createUrlTree has been updated, affecting tests that mock ActivatedRoute. Adjust tests accordingly, especially when providing relativeTo in navigation commands.

Deprecations

Several APIs remain available in v16 but are slated for removal in future releases. Follow Angular’s deprecation practices and update applications promptly to stay reliable.

Conclusion

If you are an Angular developer or considering Angular for a new project, understanding these new features is essential. Signals, SSR, and other enhancements bring Angular on par with modern frameworks, and staying up‑to‑date ensures you can leverage them before your codebase becomes outdated.