Image for post: Angular 19: what’s new in November 2024 - standalone components, Signals, Hydration & HMR

Angular 19: what’s new in November 2024 - standalone components, Signals, Hydration & HMR

23 August 2025 Estimated reading time: 2 minutes

Released on November 19, 2024, Angular 19 brings a wave of improvements that enhance reactivity, simplify architecture, accelerate development workflows, and elevate performance—perfect for crafting scalable, modern web apps. In this post, we’ll dive into Angular 19’s standout features and why upgrading now pays off.

Standalone Components, Directives & Pipes by default

Angular 19 flips the default: you no longer need standalone: true—components, directives, and pipes are standalone out of the box. Need compatibility with NgModules? Just set standalone: false. The CLI’s ng update tool also handles migrating your codebase automatically.

Enhanced Signals & Reactive APIs

Reactivity in Angular deepens significantly:

Stable signal-based APIs—like input(), output(), model(), and query-based signals - are production-ready.

linkedSignal: A writable signal that auto-updates based on a computed expression.

import { signal, linkedSignal } from '@angular/core'; const options = signal(['apple', 'banana', 'fig']); const choice = linkedSignal(() => options()[0]); // ... choices.set('fig'); options.set(['peach', 'kiwi']); // Resets to 'peach'

 

resource() / rxResource() APIs now simplify async data handling, caching, and state management.

const todosResource = resource({ loader: () => fetch('/api/todos').then(res => res.json()) }); const todo = todosResource(); console.log(todo.value, todo.status);

 

Structured Server-Side Rendering (SSR): Hydration & Event Replay

Angular 19 improves hydration workflows in SSR:

  • Incremental Hydration: Use directives like @defer(on interaction) to hydrate only when needed—boosting performance and TTI.

  • Event Replay: Captures user interactions during server render and replays them once the app bootstraps. Great for seamless UX on slow networks.

    import { provideClientHydration, withEventReplay } from '@angular/platform-browser'; bootstrapApplication(AppComponent, { providers: [provideClientHydration(withEventReplay())] });

Route-Level render modes

Gain granular control with route-specific rendering strategies:

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

Optimize for performance and UX by choosing SSR, client-side rendering, or pre-rendering on a per-route basis.

Development enhancements: HMR for styles & templates

Angular 19 supercharges dev cycles:

  • Hot Module Replacement (HMR) for styles works out-of-the-box.

  • Template HMR is experimental and can be enabled with:

NG_HMR_TEMPLATES=1 ng serve

Instant updates without losing app state—great for rapid UI iterations. 

Cleaner Code: Unused Import Cleanup & Warnings

Keep your imports clean:

  • Angular 19 warns about unused standalone imports at compile time.

  • Run ng generate @angular/core:cleanup-unused-imports to remove them automatically.

TypeScript 5.7 support

With full compatibility for TypeScript 5.7, you can safely leverage the latest TS features in Angular 19 projects.

Angular Material updates

Material evolves with Angular 19:

  • Theming API: Simpler custom themes via mat.theme and related SCSS mixins.
  • 2D Drag-and-Drop: Supports mixed horizontal and vertical orientation.
  • Time Picker Component: A long-awaited UI addition.

Migration Tips & SEO Benefits

  • Upgrade Command

    ng update @angular/cli @angular/core

    Leverage migration schematics to automatically refactor to standalone defaults.

  • Embrace signals, incremental hydration, and event replay to improve Core Web Vitals (TTI, FID) and SEO.

  • Use HMR and cleanup schematics to speed dev cycles and ship cleaner code.

SEO optimization tips

  • Target Keywords: Angular 19, standalone components, linkedsignal, resource API, incremental hydration, event replay, HMR, Angular 2024 release, route-level rendering.
  • Meta Description:
  • “Explore Angular 19’s coolest features—standalone components by default, linkedSignal, resource API, incremental hydration, event replay, HMR, and route-level rendering—for faster, cleaner, and reactive web development.”

Final thoughts

Angular 19 sets the stage for cleaner architecture, reactive state management, performance-first rendering, and smoother development workflows. From default standalone components to SSR enhancements and Material upgrades, it continues the framework’s modernization journey.