Angular 16: The biggest release since Angular was initially rolled out

The Angular team has released the highly anticipated Angular 16, the biggest release of the JavaScript framework since the launch of Angular 2. As part of the Angular Momentum initiative, it aims to further improve the developer experience and fast track new features to implement. A first step is to simplify reactivity in Angular applications, because the introduction of signals as a central feature revolutionizes change detection in Angular.

Angular 16 signals simpler reactivity

Previously, Angular had to rely on zone.js to provide change detection. However, this solution did not scale cleanly and required many small performance hacks to work efficiently in large applications. With Angular 16, zone.js becomes an optional dependency, while Signals introduce what we call reactive primitives: signal, computed and effect:

• signal is the equivalent of a variable and defines a changing value, comparable to a class property or an observable of('value').
• computed is a composite or calculated value that derives its value from other signals. With computed it is possible to clearly define when a value needs to be recalculated, which offers a decisive performance advantage over classic interpolated values ​​in Angular.
• effect denotes a function that is executed when dependencies change. This means signal values ​​that are used within the effect. They enable developers to react easily and conveniently to changes in the value of signals. Both primitive signals and computed signals are taken into account. Developers don’t have to worry about handling these values ​​because transitive dependency detection is done automatically.

This structure allows the reactivity of the components to be controlled in a much more fine-grained manner. The simpler mental model clears up spongy dependencies of the respective view and unclear data flow. In addition, the number of arithmetic operations at runtime decreases, which ultimately leads to higher performance.

Backwards compatibility and interaction with RxJS

Although full implementation of Signals is not expected until later this year, developers can now use the feature via @angular/core or @angular/core/rxjs-interop. Future plans also include simplifying lifecycle hooks that work on top of Signals.

Predefined functions such as toSignal and toObservable, which allow conversion to and from observables. In addition, the new takeUntilDestroyed-Operator to clean up observables in components, which simplifies resource management in Angular applications.

In the further course, the Angular team also plans to convert other interfaces to the new Signals API. For example, component inputs and the component lifecycle hooks are to be converted.

Server-side rendering with Angular Universal

Angular Universal now offers a Developer Preview for an overhauled server-side rendering. A significant innovation is the introduction of the “Full App Non-Destructive Hydration”. Unlike previous approaches where the DOM was re-rendered as soon as the hydration took place, the framework now checks if the DOM nodes already exist when building internal data structures. It then associates these nodes with the appropriate event listeners. In order to use this feature, it is necessary to activate the function provideClientHydration() include in the providers array.

This approach brings several advantages for users of Angular apps:

• No more flickering during application loading process
• Improved performance on Web Core Vitals
• Easy integration into existing apps, leading to higher adoption rates
• The conversion can be implemented incrementally. With the ngSkipHydrationattribute, components can still manually manipulate the DOM if necessary.

According to the Angular team, initial tests show an improvement of 45 percent in the Largest Contentful metric – a significant increase in user experience.

These first steps are intended to mark the beginning of the future of server-side rendering, with further features such as partial hydration and resumability to follow soon.

Angular is now clearly hot on the heels of market competitors like Next.js and is turning a previously neglected topic into a real feature.

Extension of the standalone APIs

Angular 16 extends the standalone APIs to make migrating modules and components easier. New schematics convert existing code, remove superfluous NgModules and change the application’s bootstrapping so that it is based on standalone APIs.

All you need is a single command in the project:

ng generate @angular/core:standalone

For new projects, Angular 16 offers the possibility to directly create a simplified structure with standalone components. With the command ng new --standalone developers can set up a new project that is already based on standalone APIs. This makes it easier to get started with Angular projects and enables a more efficient project structure.

Verbessertes Tooling in Angular 16

Angular 16 has some interesting new features and improvements in the area of ​​tooling:

This includes a preview of the new build tooling that combines Vite and esbuild. As a replacement for Webpack, the Angular team is now testing the use of these two tools. In initial tests, esbuild has shown a 72 percent improvement in build performance for production builds. Vite, as an esbuild on esbuild, also enriches ng serve with this performance gain. In the Angular CLI, Vite is only used as a development server instead of mapping the entire compilation in it.

Angular 16 also offers experimental support for Jest and Web Test Runner. According to the Angular team, polls in the Angular and wider JavaScript community rank Jest among the most popular unit testing tools. The development team has expanded the Angular Language Service: It now offers the option of using autocomplete imports in templates. Pipes and components can now be imported directly from the template.

Additionally, Angular 16 supports TypeScript 5.0, including support for ECMAScript decorators, no ngcc, and support for service workers in standalone applications.

Overall, these improvements in Angular 16 tooling contribute to an improved developer experience and more efficient workflows.

Innovations for the developer experience

In addition, Angular 16 brings a number of innovations and improvements that further optimize the developer experience:

Router

For the first time it is now possible to address the inputs of a component directly in the route configuration. This makes it possible to store values ​​in the resolve-property of a route, which are then available directly after calling the route.

Required Inputs

Developers now have the option of sending an input as required to mark. As a result, a component can only be used if it fulfills the required inputs. This step is especially useful for component libraries and large development teams to improve code quality and maintainability.

More flexible handling of cleanup logic in OnDestroy

With the introduction of the Injectable DestroyRef developers can be more flexible in registering cleanup logic in components, which improves resource management in Angular applications.

Self-closing Tags

Another innovation is the introduction of self-closing tags for component selectors. As a result, it is no longer necessary to write out tags twice, but they can be designed to be self-closing.

In a blog entry, the development team presents the new features in Angular 16. More details can be found in the GitHub repository.

(May)