Episode 23/45: Angular 17

#webdev #javascript #programming #angular

Angular 17 is out!

We can group the features into the new ApplicationBuilder, Signals, Template Syntax and the @defer command.

ApplicationBuilder

The ApplicationBuilder powers ng build or ng serve. Under the hood, it doesn't webpack anymore. Instead, it runs on esbuild, a tool written in Go that runs significantly faster.

The ApplicationBuilder also includes SSR. In the past, we had to use @nguniversal. Now, SSR is a first-class citizen of Angular. If you migrate, you have to enable the new builder manually.

Signals

Compared to Angular 16, there were three major changes.

First, there is no mutate method anymore.

Second, in 16, the Signal fired on every update method call, even if you didn't change the object reference. In 17, it checks against the object reference.

Third, is the local Change Detection. That means the change detection could run on a specific component in the component tree.
To make this happen, the change can only be Signal (not a click or synchronous function), and the components have to set their strategy to OnPush.

New Template Syntax & `@defer`

The "Star Feature" is definitely the new template syntax for if, for, switch and - brand-new - the defer. The defer command in the template creates a lazy-loaded chunk for its inner components. We don't have to do anything else. "Just use it!"

For more information, please read the official blog article and watch the official videos, and you will also find plenty of community content. There's no shortage of it.

youtube.com