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.

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.