Angular 22.1: what's new

Angular 22.1: what's new

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.

Signal-based queries are more flexible

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.

Improved hydration diagnostics

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.

Smaller control flow fixes

@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.

Build output

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.