Angular 17 previews control flow, better type checking

Angular 17, the latest version of Google’s TypeScript-based web app development framework, has arrived, featuring built-in control flow to improve the developer experience.

Introduced via a bulletin on November 8, Angular 17 can be accessed from GitHub. Google with Angular 17 has released a block template syntax providing “powerful” features with simple, declarative UIs. This block syntax has been used for an optimized, built-in control flow, offering better type checking due to more optimal type narrowing.

Available as a developer preview in Angular 17, control flow also enables a more ergonomic syntax that is closer to JavaScript, and is thus more intuitive and requires fewer documentation lookups. Control flow also offers significant performance improvements, and is automatically available in templates without additional imports.

Angular 17 also features a set of new lifecycle hooks, afterRender, to register a callback to be invoked each time an application finishes rendering, and afterNextRender, to register a callback to be invoked the next time the application finishes rendering. These have been set up as part of a plan to improve the performance of Angular’s SSR (server-side rendering) and SSG (static-site generation) by eventually moving away from DOM emulation and direct DOM manipulations.

Google says control flow significantly improves performance, citing up to 90% faster runtime with built-in control flow loops, up to 87% faster builds for hybrid rendering, and up to 67% faster builds for client-side rendering.

Angular 17 follows the May release of Angular 16, which emphasized reactivity and performance. Other features in Angular 17 include:

• Hydration, the process that restores the server-side-rendered application on the client, is out of developer preview and enabled by default. Hydration boosts performance by avoiding extra work to recreate DOM nodes.
• Angular Signals, for granularly tracking state in an application, graduates from developer preview. This feature allows the framework to optimize rendering updates. More capabilities for Signals are planned to improve the developer experience by Angular 18.
• A new deferrable views capability, also in a developer preview, lets developers lazily load components and transitive dependencies with a single line of declarative code.
• The hybrid rendering experience has been revamped. SSR and SSG are brought closer to developers via a prompt in ng new.
• The application builder introduced in Angular 16, featuring ESBuild plus a Vite-powered build experience, is enabled by default for new applications. Some users have reported a 67% build time improvement.
• The View Transitions API, for smooth transitions when changing the DOM, is now directly supported in the Angular router via the ViewTransitions feature.
• The Angular image directive now automatically generates preconnect links for domains provided as an argument to the image loader.

The Angular development team also is launching a beta preview of angular.dev, with plans to make it the default website for Angular with Angular 18. It will be the new home for Angular documentation, with updated guidance to help with the latest features of the framework.