In previous Angular v15, the Angular team reached a major milestone in Angular's simplicity and developer experience by upgrading the standalone API from the developer preview to the stable version. Today, Angular continues that momentum with the release of its biggest version update since Angular's original launch; huge leaps forward in Reactivity, server-side rendering, and tooling.
Rethinking Reactivity
As part of the v16 release, Angular brings a developer preview of the new Reactivity model, which brings significant improvements to performance and developer experience.
Fully backward compatible and interoperable with current systems, and capable of :
- Improve runtime performance by reducing the number of calculations during change detection.
- Brings a simpler mental model to Reactivity, making it clear about view dependencies and data flow through the application.
- Enables fine-grained reactivity, which in a future release will allow us to only check for changes in affected components.
- In a future release, make Zone.js optional by using Signals to notify the framework when the model changes.
- Provides computed properties without recomputing on each change detection cycle
- Implemented better interoperability with RxJS
Server-side rendering and hydration enhancements
According to Angular's annual developer survey, server-side rendering is the number one area of improvement for Angular. Over the past few months, Angular has worked with the Chrome Aurora team to improve performance and DX for hydration and server-side rendering. Today, Angular brings a developer preview of non-destructive hydration for full applications.
In the new full application non-destructive hydration, Angular no longer re-renders the application from scratch. Instead, the framework looks for existing DOM nodes and attaches event listeners to those nodes while building its internal data structures.
The benefits of doing this are:
- To the end user, there is no flickering of content on the page
- Better Web Core Vitals in some cases
- Future-proof the architecture, enabling fine-grained code loading with primitives we'll be launching later this year.
- Easily integrate with existing applications with just a few lines of code
- For components that perform manual DOM manipulation, use
ngSkipHydrationthe attribute to gradually adopt hydration
New server-side rendering features
As part of the v16 release, Angular also updated Angular Universal ng add schematics, which enables you to add server-side rendering to your projects using a standalone API. Support for stricter content security policies has also been introduced for inline styles.
Improved tooling for individual components, directives, and pipelines
Angular is a framework used by millions of developers for many mission-critical applications, and we take breaking changes seriously. Angular started exploring independent APIs a few years ago, and now after more than a year of gathering feedback and iterating on the APIs, Angular wants to encourage broader developer adoption of these APIs.
To support developers transitioning their applications to a standalone API, Angular has developed a migration diagram and a standalone migration guide . Once you're in your project directory run:
ng generate @angular/core:standalone
This plan will transform your code, remove unnecessary NgModulesclasses , and eventually change the project's bootstrap structure to use a separate API.
standalone ng new
As part of Angular v16, you can create new projects in a standalone way from the start. To try out the developer preview in standalone mode, make sure you're on Angular CLI v16 and run:
ng new --standalone
You'll get a simpler project output without any NgModules. Additionally, all generators in a project produce independent directives, components and pipelines.
More details can be found at: https://github.com/angular/angular/releases/tag/16.0.0