Angular 19: Complete Guide to Standalone Components, Signals, and Performance Features

Created: 23 August 2025 Estimated reading time: 5 minutes

TL;DR

Angular 19 (released November 19, 2024) revolutionizes development with standalone components by default, enhanced signal-based reactivity, improved SSR with incremental hydration and event replay, route-level rendering modes, and HMR for styles and templates. Upgrade now for cleaner code, better performance, and superior developer experience.

What's new in Angular 19?

Angular 19 represents a major leap forward in modern web development. This release focuses on reactivity, simplified architecture, accelerated workflows, and enhanced performance—making it ideal for building scalable applications.

Let's explore the standout features that make Angular 19 a must-upgrade.

Standalone components are now the Default

Angular 19 flips the script on component architecture. Standalone components, directives, and pipes are now the default—no more standalone: true declarations needed.

Before Angular 19

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  standalone: true, // Required in Angular 18
  template: `<h1>User Profile</h1>`
})
export class UserComponent {}

After Angular 19

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  // standalone: true is now implicit!
  template: `<h1>User Profile</h1>`
})
export class UserComponent {}

Need NgModules compatibility? Simply add standalone: false. The CLI's ng update automatically migrates your existing codebase.

SEO Benefit: Simpler code structure improves maintainability and reduces bundle sizes, contributing to better Core Web Vitals.

Enhanced Signal-based reactivity

Angular 19 stabilizes and expands its signal APIs, making reactive programming more intuitive and powerful.

Stable Signal APIs

The following signal-based APIs are now production-ready:

input() - For component inputs
output() - For event emitters
model() - For two-way binding
Query-based signals - For ViewChild/ContentChild

linkedSignal: Smart reactive values

linkedSignal creates a writable signal that automatically recomputes based on a source signal.

import { signal, linkedSignal } from '@angular/core';

const options = signal(['apple', 'banana', 'fig']);
const choice = linkedSignal(() => options()[0]);

console.log(choice()); // 'apple'

choice.set('fig'); // Manual override
console.log(choice()); // 'fig'

options.set(['peach', 'kiwi']); // Triggers recomputation
console.log(choice()); // 'peach' - automatically reset!

Use Case: Perfect for form defaults, filtered lists, or any scenario where a value should react to changes but allow manual overrides.

resource() API: Simplified Async Data Management

The new resource() and rxResource() APIs streamline async data handling with built-in caching and state management.

import { resource } from '@angular/core';

const todosResource = resource({
  loader: () => fetch('/api/todos').then(res => res.json())
});

// In your component
const todoData = todosResource();

console.log(todoData.value);   // The loaded data
console.log(todoData.status);  // 'loading' | 'success' | 'error'
console.log(todoData.error);   // Error object if failed

Advanced Example with Dependencies

const userId = signal(1);

const userResource = resource({
  request: () => ({ id: userId() }),
  loader: ({ request }) => 
    fetch(`/api/users/${request.id}`).then(res => res.json())
});

// Automatically refetches when userId changes
userId.set(2);

SEO Benefit: Better data loading patterns improve Time to Interactive (TTI) and First Contentful Paint (FCP).

Server-Side rendering: incremental Hydration & event replay

Angular 19 takes SSR to the next level with intelligent hydration strategies and seamless user interaction handling.

Incremental Hydration

Load and hydrate components only when needed using the @defer directive.

@Component({
  selector: 'app-dashboard',
  template: `
    <header>Dashboard Header</header>
    
    @defer (on interaction) {
      <app-heavy-chart />
    } @placeholder {
      <div class="skeleton-chart"></div>
    }
    
    @defer (on viewport) {
      <app-user-comments />
    }
  `
})
export class DashboardComponent {}

Benefits:

Faster initial page loads
Improved Time to Interactive (TTI)
Better mobile performance
Reduced JavaScript bundle execution

Event Replay: zero lost interactions

Event replay captures user interactions during server rendering and replays them once the app hydrates—no more lost clicks!

import { bootstrapApplication } from '@angular/platform-browser';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

Real-World Impact: Users on slow networks can interact immediately without waiting for full JavaScript execution.

Route-Level rendering modes

Gain granular control over how each route renders with route-specific strategies.

import { RenderMode } from '@angular/ssr';

export const serverRouteConfig = [
  { 
    path: '/login', 
    mode: RenderMode.Server  // SSR for SEO
  },
  { 
    path: '/dashboard', 
    mode: RenderMode.Client  // CSR for dynamic content
  },
  { 
    path: '/blog/**', 
    mode: RenderMode.Prerender  // Static generation for blogs
  },
];

When to use each mode

RenderMode.Server (SSR)

SEO-critical pages (landing, product pages)
Dynamic content requiring fresh data
Authentication-dependent views

RenderMode.Client (CSR)

Admin dashboards
Real-time applications
User-specific interfaces

RenderMode.Prerender (SSG)

Blog posts and documentation
Marketing pages
Static content

SEO Benefit: Optimize each route for maximum performance and search visibility.

Developer experience: Hot Module Replacement

Angular 19 supercharges development cycles with HMR for both styles and templates.

HMR for Styles (Built-in)

Style changes apply instantly without full page reloads—works out of the box!

ng serve
# Edit your styles.css - see changes immediately!

HMR for Templates (Experimental)

Enable template HMR for instant UI updates without losing component state.

NG_HMR_TEMPLATES=1 ng serve

Developer Impact: Iterate on UI designs 10x faster without losing form data or navigation state.

Code quality: unused import cleanup

Angular 19 helps maintain clean codebases with compile-time warnings for unused imports.

Automatic detection

// Angular 19 will warn about unused imports
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';  // ⚠️ Warning: unused

@Component({
  selector: 'app-example',
  imports: [CommonModule], // FormsModule not used
  template: `<div>Hello</div>`
})
export class ExampleComponent {}

Automatic Cleanup

ng generate @angular/core:cleanup-unused-imports

This schematic scans your project and removes all unused standalone imports automatically.

TypeScript 5.7 Support

Angular 19 fully supports TypeScript 5.7, allowing you to leverage the latest language features including:

Improved type inference
Better error messages
Enhanced decorator support
Performance optimizations

// Use TS 5.7 features confidently
const config = {
  timeout: 5000,
  retries: 3
} as const satisfies ConfigSchema;

Angular Material Updates

Material components receive significant enhancements in Angular 19.

Simplified Theming API

@use '@angular/material' as mat;

$my-theme: mat.theme((
  color: (
    primary: mat.$blue-palette,
    tertiary: mat.$green-palette,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

html {
  @include mat.all-component-themes($my-theme);
}

New Features

2D Drag-and-Drop: Mixed horizontal and vertical dragging support
Time Picker Component: Native time selection UI
Improved Accessibility: Enhanced ARIA labels and keyboard navigation

Migration Guide

Step 1: Update Angular

ng update @angular/cli @angular/core

Step 2: Run Migration Schematics

The CLI automatically:

Converts to standalone defaults
Updates deprecated APIs
Optimizes imports

Step 3: Adopt New Features Gradually

// Migrate to signals incrementally
// Old approach
@Input() user: User;

// New approach (Angular 19)
user = input<User>();

Step 4: Enable SSR Enhancements

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(
      withEventReplay(),
      withIncrementalHydration()
    )
  ]
};

SEO Optimization Checklist

Core Web Vitals Improvements

✅ Incremental Hydration - Reduces TTI by 40-60%
✅ Event Replay - Improves FID scores
✅ Route-Level Rendering - Optimizes LCP per page
✅ Smaller Bundles - Standalone components reduce bundle size

Technical SEO

Use RenderMode.Server or RenderMode.Prerender for public-facing pages
Implement incremental hydration for heavy components
Enable event replay for better user experience metrics
Optimize images and lazy-load heavy content with @defer

Conclusion

Angular 19 represents a significant evolution in the framework's journey toward cleaner architecture, reactive state management, and performance-first rendering.

Key Takeaways:

Standalone components simplify development and reduce boilerplate
Signal-based reactivity provides predictable, performant state management
SSR enhancements deliver superior SEO and user experience
HMR accelerates development workflows
Material updates bring modern UI capabilities

Upgrade today to take advantage of these improvements and position your applications for the future of web development.

Last Updated: January 2026
Angular Version: 19.x
Compatibility: TypeScript 5.7+