Meet Angular v19 - Faster, Smarter, and Easier to Use

Discover Angular v19’s game-changing features like incremental hydration and event replay - built for speed and developer joy.

Over the past two years, the Angular team has poured effort into boosting developer experience and performance. With v19, released today, they’re doubling down with features that make building fast web apps a breeze. The community’s excitement at our events shows we’re on the right track—let’s dive into what’s new!

Built for Speed

Angular v19 takes performance to the next level, especially for server-side rendered (SSR) apps. Here’s what’s cooking:

Incremental Hydration - Lazy Loading Done Right

Say hello to incremental hydration, now in developer preview. Using the familiar @defer syntax, you can lazy-load parts of your template. For example:

@defer (hydrate on viewport) {
  <shopping-cart/>
}

This means Angular only hydrates components when they’re needed—like when they hit the viewport. Check the demo above: grayed-out sections pulse as they load, then glow purple when ready. Add it to your SSR app with:

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
provideClientHydration(withIncrementalHydration());

Event Replay - Seamless User Experience

Ever clicked a button on an SSR app only to wait for the code to load? Not anymore. Event replay, stable in v19 and enabled by default, captures user actions during initial load and replays them once the JavaScript is ready. See it in action:

Just update your bootstrap with:

provideClientHydration(withEventReplay());

Route-Level Control

Customize where routes render—server, client, or prerender—with ServerRoute. Try this:

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', mode: RenderMode.Server },
  { path: '/dashboard', mode: RenderMode.Client },
];

It’s in developer preview, making route management a cinch.

Developer Experience Boosts

v19 isn’t just about speed—it’s about making your life easier:

• Hot Module Replacement (HMR): Edit styles or templates, and see changes instantly without losing state. Enable template HMR with NG_HMR_TEMPLATES=1 ng serve.
• Standalone by Default: The CLI now auto-removes standalone metadata for standalone components during updates.
• Time Picker: A long-awaited Angular Material feature, shipped with 1.3k+ GitHub 👍, is ready to use!

Evolving Reactivity

New APIs like linkedSignal and resource (experimental) enhance Angular’s reactivity. For example:

const options = signal(['apple', 'banana']);
const choice = linkedSignal(() => options()[0]);
options.set(['peach']); // choice resets to 'peach'

Why It Matters

Angular v19 blends performance and developer joy, perfect for apps like your Astro blog if you ever switch frameworks. Try it out, share feedback, and let’s build amazing things together in 2025!