Catching up with Angular 19

Angular 19 continues its ongoing project of simplifying and improving developer experience while boosting performance. The development team’s well-publicized attention to these goals has paid off in the general perception of Angular as a project on the upswing. The most recent State of JavaScript survey showed a strong increase in positive developer sentiment toward Angular.

Now is a great time to catch up with what’s new with this dynamic framework. I’ll discuss several innovative ideas and changes found in the latest release. Also see my recent article comparing Angular with React, Vue, and Svelte.

What’s different about Angular?

Angular is a complete, all-in-one reactive framework for JavaScript. It started as an architected system that has evolved in response to real-world usage and feedback. Changes recently have focused on developer experience and performance. This latest release brings continued progress that will be of interest to both Angular users and the Angular-curious.

Incremental hydration

Incremental hydration is a performance optimization that is new with the developer preview of Angular 19. Hydration is the process of making components in the user interface interactive. This is a key element of optimization in modern applications, where striking a balance between server-side rendering (SSR) and client-side rendering is essential.

There are many ways to slice this cake, and Angular 19’s incremental hydration puts the power in the developer’s hands. Developers using Angular 19 can define exactly how a page will be loaded on the client after it has been rendered on the server side.

Angular developers use the @defer directive to describe to the engine how a component should be made interactive in the browser. The engine uses these instructions to load the necessary JavaScript. Triggers in the @defer annotation are used to fine-tune this behavior.

While @defer is not new, the Angular 19 version lets you control how app hydration is done on a per-component basis.

More about incremental hydration
See the incremental hydration RFC for a deep dive on this feature. The RFC also gives a sense of the collaborative community vibe at Angular these days.

Event replay

The Angular 19 documents include a deep dive into event replay, which is a largely under-the-hood mechanism related to hydration. Essentially, event replay answers the question: If a component is loaded onto the browser without interactivity and then engaged by the user, how will the engine “replay” that event once the component is bootstrapped?

Usually, these details are hidden from framework users, even though they have a major impact on application performance. Event replay also has interesting uses when optimizing or debugging deeply. It’s an interesting new feature for programmers to explore.

Granular control over server routes

Angular is adding a ServerRoute to allow users to fine-tune the engine’s rendering of server-side routes. Angular joins other full-stack frameworks in empowering developers with more control over route rendering. Essentially, the new ServerRoute allows you, as the app developer, to control how your routes are rendered on a per-page basis. In Angular 19, you now have three options:

Rendered on the server

Rendered on the client

Pre-rendered on the server

This lets you get the right mode for your specific pages, based on their characteristics. By default, routes with parameters are server-side rendered while routes without parameters are pre-rendered.

These kinds of hooks into the SSR engine allow developers to explore more aggressive, application-specific optimizations than were previously possible. It’s important to remember that you don’t have to adopt these optimizations up-front. It’s sometimes not clear where to apply them until an application has matured enough that you have real data to work with. But when you do find the bottlenecks, being able to drill down and adjust directly in the UI is vital.

There is both an art and a science to this kind of UI optimization. It often also depends on end-user behavior. Angular now provides tools that make it easier than ever for application developers to handle complex user interactions in the UI.

Factoring out Zone.js

Factoring out Zone.js was an implementation decision to simplify Angular’s internal design and performance. Zone.js was used by the server-side rendering engine to determine when the page was finished with asynchronous operations (things like data store and API requests and loading resources for navigation). These had to be completed before the page was marked as ready (“stable”) and sent to the client. Most developers who interacted with Zone.js did so for debugging or optimizing.

Angular 19 replaces Zone.js with RxJS, which is already in use throughout Angular. RxJS simplifies the dependencies for Angular, brings this aspect of the engine in line with the existing idioms for the framework, and makes it easier for application developers to push debugging into the rendering engine.

RxJS and Signals in Angular
You might think of RxJS as Angular’s programming-in-the-large reactive engine, while Signals are the low-level eventing primitive. RxJS is a battle-tested, highly sophisticated tool for dealing with all kinds of event streams and asynchronous sources like APIs. Signals are used directly for binding reactive variables.

Standalone components are now the default option

Angular 19 makes standalone components (i.e., components defined without a module) the default, though developers can still use modules. Non-module components were first introduced in Angular 17, and have already become the de facto standard for developers in practice. It is remarkable how much lighter components feel after dropping the module front matter.

Signals-based inputs, outputs, and view queries

Signals are quite popular for providing fine-grained, universal reactivity in a simple JavaScript syntax. Angular adopted Signals early on, and Angular 19 solidifies their use in inputs (Angular’s version of child props), outputs (child-to-parent eventing), and view queries (direct DOM access like React’s useRef). This simplifies and unifies Angular’s reactive idiom, though in many cases the difference is subtle: just an extra dot operator or parentheses for Signals.

Angular 19 includes CLI commands that will auto-migrate your application to Signals. The Angular team has also integrated Signals auto-migration capabilities into their IDE schematics. You can simply right-click to get context-sensitive access to the Signals conversion support. In cases where you have code explicitly modifying values, you will still have to set up the migration manually, since Signals inputs are immutable.

Command-line environment variable declarations

Every CLI tool must be able to specify environment variables for commands. Angular 19 goes a step further by adding the ability to specify environment variables for the build command:

ng build --define 'apiKey='$API_KEY''

An exciting project

That is a lot of action, especially given Angular’s brisk release cadence. It’s an exciting project and merits exploring if you aren’t already using it. Of course, all this change means Angular users have to keep up with new releases. It helps that the framework is improving with each new version and implementing many of the latest ideas in reactive programming.

It is remarkable that Angular has renewed itself to such an extent that it is now considered one of the most dynamic and forward-looking of all the reactive frameworks. It’s a big, flagship project, backed by Google, but with a welcoming open source vibe. That’s impressive.