ANGULAR 16
ANGULAR 16
Released May 3rd 2023
Continuing the Angular Momentum with the biggest release since the initial rollout of Angular
ANGULAR 16
ANGULAR 16
ANGULAR 16
ANGULAR 16
universal
Non-destructive Hydration in Developer Preview!
ANGULAR 16
universal
Better Web Core Vitals!
Before: re-build entire DOM structure from scratch and replace the server-rendered result.
After: look up existing DOM nodes, attach meta data and event listeners in place.
No content flickering!
Future proofing for stuff to come in later versions of Angular!
ANGULAR 16
universal
ANGULAR 16
universal
Constraints:
Your application must have the same generated DOM structure on both the server and the client. Whitespace and comments as well!
No direct DOM manipulation!
Valid HTML structure
ANGULAR 16
universal
"Server side rendering will soon be a native part of the Angular CLI. We plan to move all of Angular Universal’s packages into the Framework and tooling to ensure the best, and smoothest experience getting started with SSR and Angular."
ANGULAR 16
Standalone
The schematics will convert your code, remove unnecessary NgModules classes, and finally change the bootstrap of the project to use standalone APIs.
ANGULAR 16
Standalone
You’ll get a simpler project output without any NgModules. Additionally, all the generators in the project will produce standalone directives, components, and pipes!
ANGULAR 16
Standalone ZONE
You can now configure Zone.js with the new bootstrapApplication API.
ANGULAR 16
Tooling - BUILD
The ESBuild-based build system enters developer preview! ESBuild powers both your development and production builds!
Early tests showed over 72% improvement in cold production builds.
ANGULAR 16
ng serve now uses Vite for the development server!
Angular CLI relies on Vite exclusively as a development server. To support selector matching, the Angular compiler needs to maintain a dependency graph between your components which requires a different compilation model than Vite.
Tooling - BUILD
ANGULAR 16
Tooling - BUILD
ANGULAR 16
Tooling - TEST
Experimental Jest Support!
ANGULAR 16
Tooling - TEST
Moving to Web Test Runner
ANGULAR 16
Tooling - EXTRAS
Autocomplete imports in templates
ANGULAR 16
Tooling - EXTRAS
Bye bye ngcc
ANGULAR 16
Tooling - EXTRAS
TypeScript 5.0 support
ANGULAR 16
DX
REQUIRED INPUTS!!!!!
ANGULAR 16
DX
Passing router data as component inputs!!!!
ANGULAR 16
DX
Self-closing tags!!!!
BEFORE:
AFTER:
ANGULAR 16
DX
DestroyRef!!!
ANGULAR 16
DX
DestroyRef!!!
ANGULAR 16
REACTIVITY
ANGULAR 16
REACTIVITY
Entirely backwards compatible and interoperable with the current system
A simpler mental model for reactivity, making it clear what are the dependencies of the view and what’s the flow of data through the app
Enables fine-grained reactivity, which in future releases will allow us to check for changes only in affected components
Makes Zone.js optional in future releases by using signals to notify the framework when the model has changed
ANGULAR 16
REACTIVITY
Go from Signal to Observable:
ANGULAR 16
REACTIVITY
And Observable to Signal:
ANGULAR 16
REACTIVITY
ANGULAR 16
Angular 16!
By Craig Spence
