Angular 22.1: what's new

Angular 22.1 has been released with refinements to signals, hydration, and control flow. Developers can now use viewChild and contentChild with more relaxed type inference, including inside computed signals, eliminating boilerplate ngAfterViewInit checks. Hydration mismatch errors now point to the specific DOM node, and @for blocks with track catch more identity-change issues. The update also delivers smaller bundles through better tree-shaking of unused signal utilities.

Angular 22.1 shipped a handful of changes worth knowing about if you're on a recent version. Here's what's in it, with code. You can now use viewChild and contentChild with more relaxed type inference in more places, including inside computed signals. export class MyComponent { header = viewChild<HeaderComponent 'header' ; headerText = computed = this.header ?.text ?? '' ; } No boilerplate ngAfterViewInit checks needed to read the value safely. If you're using SSR, error messages for hydration mismatches now point more precisely at the DOM node that caused the mismatch, instead of just naming the component. bootstrapApplication AppComponent, { providers: provideClientHydration , } ; The console output during dev now includes the actual vs expected node, which cuts down on guesswork when a mismatch happens deep in a template. @for blocks with track now catch a few more cases where the tracking expression references something that changes identity unexpectedly, and warn about it in dev mode. @for item of items ; track item.id { <app-item data ="item" / } If item.id isn't stable, you'll see a warning in the console rather than silent re-renders. Builds using the application builder produce slightly smaller bundles due to better tree-shaking of unused signal utilities. No config changes required to get this — it's automatic on upgrade. That's the bulk of it in 22.1. Nothing dramatic, mostly refinements to signals, hydration, and control flow.