Angular 18 arrives with server-side rendering improvements

Google has published Angular 18, a major upgrade of Google’s TypeScript-based web app development framework that brings server-side rendering improvements and experimental support for zoneless change detection. The release also moves deferrable views and declarative control flow out of developer preview to a stable stage.

Angular 18 was released May 22. It can be accessed from GitHub.

Server-side rendering improvements include i18n (internationalization) hydration support, better debugging, hydration support in Angular Material, and event replay, which is powered by the same library as Google Search. Google previously enhanced server-side rendering in Angular 17, released in November 2023, which brought hydration out of developer preview and enabled it by default.

Zoneless change detection, a new and experimental capability in Angular 18, frees change detection from its historical reliance on the zone.js library. This feature is intended to eventually offer a host of improvements including better composability for micro front ends and better interoperability with other frameworks, faster initial render and runtime, smaller bundle sizes and faster page loads, simpler debugging, and more readable stack traces.

Also in Angular 18, Material 3 support, deferrable views, and built-in control flow are now stable. Deferrable views, which are also known as @defer blocks, can be used in component templates to defer the loading of select dependencies within the template, thus reducing the initial bundle size of the application.

Built-in control flow, or declarative control flow, is a new built-in syntax for control flow that brings functionality such as  NgIf, NgFor, and NgSwitch into the framework (as @if, @for, and @switch respectively), allowing developers to conditionally show, hide, and repeat elements.

Other features in Angular 18:

• Event dispatch, a core library previously known as jsaction, now resides in the Angular monorepo. Event dispatch powers event replay when using hybrid rendering.
• Angular DevTools has been updated to visualize the Angular hydration process. It also now supports multiple Angular apps running in iFrames.
• The FormControl, FormGroup, and FormArray classes from Angular forms now expose a property called events, allowing developers to subscribe to a stream of events for form control. Using this can track changes in value, touch state, pristine status, and the control status.
• To provide more flexibility when dealing with redirects, redirectTo now accepts a function that returns a string.
• Developers now can specify default content for ng-content.
• Unified control state change events are enabled.
• Angular.dev becomes the new docs website. Visitors to angular.io will be redirected.

Angular 18 follows the November 2023 release of Angular 17, which previewed control flow and introduced hydration to restore the server-side rendered application on the client. Google has revealed its intention to merge Angular with the Wiz web framework.