Angular 22.1: what's new

Angular 22.1 brings several minor improvements and refinements that are worth noting for developers using the recent versions of the framework. One of the key updates is the enhanced flexibility of signal-based queries. Developers can now utilize `viewChild` and `contentChild` with more relaxed type inference in additional locations, such as within computed signals. This allows for cleaner and more efficient code. For example, a component can be defined as follows:

```javascript

export class MyComponent {

header = viewChild<HeaderComponent>('header');

headerText = computed(() => this.header()?.text() ?? '');

}

```

Another significant enhancement is the removal of the need for boilerplate `ngAfterViewInit` checks. This is particularly beneficial when trying to read the value safely. When integrating with Server Side Rendering (SSR), improved hydration diagnostics have been implemented. These updates result in error messages that point more precisely to the DOM node that caused the hydration mismatch, rather than just naming the component. Developers can enable SSR in their applications by using the following code snippet:

```javascript

bootstrapApplication(AppComponent, {

providers: [provideClientHydration()]

});

```

The console output during development has also been refined. Now, it includes the actual and expected nodes, which helps to quickly identify the source of the hydration mismatch without the need for extensive guesswork, especially when mismatches occur deep within the template.

Additionally, there have been smaller control flow fixes in Angular 22.1. For instance, `@for` blocks with `track` now catch a broader range of cases where the tracking expression references something that unexpectedly changes identity. In development mode, these cases are now flagged with a warning in the console, preventing silent re-renders. For example:

```javascript

@for (item of items(); track item.id) {

<app-item [data]="item" />

}

```

In this case, if `item.id` is not stable, developers will receive a console warning, making the issue more apparent and aiding in debugging efforts.

Finally, the build output of applications using the application builder will exhibit slightly smaller bundles. This improvement is due to better tree-shaking of unused signal utilities, which helps to optimize the performance of the application without requiring any additional configuration or changes to the existing setup. This upgrade represents a series of well-thought-out refinements aimed at enhancing developer experience and application efficiency.