🅰️1️⃣7️⃣ Angular 17 is released: What’s new in Angular 17?

Angular 17 makes further contributions to the Angular Renaissance:

💨 It comes with new syntax for control flow,

💤 lazy loading of page parts and

🌐 better support for SSR.In addition,

👨‍💻 the CLI now relies on esbuild and thus speeds up the build significantly.

💨 New Syntax for Control Flow in Templates

Since its early days, Angular has used structural directives like *ngIf or *ngFor for control flow.

Now:

New @empty block that Angular renders when the collection being iterated is empty.

Or:

New @if simplifies the formulation of else/ else-if branches.

Different cases can also be distinguished using a @switch:

💤 Delayed Loading

For particularly performance-critical web applications such as web shops, it makes sense to defer loading less important page parts.

Angular 17 also dramatically simplifies this task with the new @defer block:

Using @defer delays the loading of the enclosed page part until a certain event occurs:

• on idle➡️ The browser reports that there are no critical tasks pending (default).
• on viewport➡️ The placeholder is loaded into the visible area of the page.
• on interaction➡️ The user begins to interact with the placeholder.
• on hover➡️ The mouse cursor is moved over the placeholder.
• on immediate➡️ As soon as possible after the page loads.
• on timer(duration)➡️ After a certain time, e.g. B. on timer(5s) to trigger loading after 5 seconds.
• when condition➡️ Once the specified condition is met, e.g. when (userName !=== null)

Example:

👨‍💻 Build Performance with esbuild

Originally, the Angular CLI used webpack to generate bundles.

Now it uses the vite dev server to speed things up by only building npm packages when needed.

🌐 SSR Without Effort with the new Application Builder

Support for server-side rendering (SSR) has also been drastically simplified with Angular 17.

When generating a new project with ng new, a --ssr switch is now available.

Summary

With version 17, the Angular Renaissance advances. The new syntax for the control flow simplifies the structure of templates. The new reconciliation algorithm used together with the new control flow improves re-rendering performance drastically.

Thanks to deferred loading, less important page areas can be loaded at a later time. This speeds up the initial page load. By using esbuild, the ng build and ng serve statements run noticeably faster. In addition, the CLI now directly supports SSR and prerendering.

🎬 Video

Learn

Full article by Manfred Steyer👇https://www.angulararchitects.io/en/blog/whats-new-in-angular-17/