Angular 16, the newest version of Google’s famous TypeScript-based web development framework, has been released as a production release, introducing a new reactivity model that promises major speed and developer experience benefits.
Angular 16 was released on GitHub on May 3, with many developer previews emphasized in various sections of the framework. According to Minko Gechev of the Google Angular team, the new reactivity model is backward-compatible and interoperable with the present system, while enabling greater runtime performance by lowering the number of calculations during change deflection. The model provides a simplified conceptual model for reactivity, highlighting the views and data flow across the app’s dependencies. Changes in impacted components may be checked using fine-grained reactivity.
Angular 16 features a development preview of the whole app’s non-destructive hydration for server-side rendering, which means that Angular no longer re-renders the application from scratch. Instead, when developing internal data structures, the framework seeks up existing DOM nodes and adds event listeners to these nodes. The advantages include no content flickering on a page for consumers, simple interaction with current apps, and a future-proof design that will enable fine-grained code loading with primitives later this year.
The ng add schematics for Angular Universal have been modified as part of the Angular 16 release, allowing developers to add server-side rendering to applications utilizing independent APIs. Inline styles now have support for tougher content security policies. The next stage in hydration and server-side rendering is partial hydration, which involves delaying the loading of non-essential JavaScript and hydrating related components afterward.
Also included in Angular 16:
- Early tests show a 72% increase in cold production builds using the build-based build system, which is currently in developer preview.
- Developers may use the Angular Signals package to construct reactive values and express dependencies between them.
- In developer preview as part of Angular 16, developers will be able to quickly “lift” signals to observables from @angular/core/rxjs-interrop.
- Through a developer preview of independent schematics, new projects may be produced as standalone from the start.
- The Jest testing framework is getting experimental support.
- Developers can define a nonce property for the styling of Angular inlined components.
- In Angular templates, self-closing tags can be used to close components.
To improve the developer experience, Angular 16 provides the option to tie route parameters to the matching component’s inputs for the router.
TypeScript 5.0 is supported, and ECMAScript decorators are used to extend JavaScript classes.
Angular 16 follows the Angular 15 release, which was unveiled as a production release in November 2022. Angular 15 stabilized APIs for building applications without using NgModules.
