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