Why does a “Roadmap” matter?

Angular’s roadmap is guided by readiness, not hard dates; things can shift, and incremental adoption is encouraged. You can follow the official roadmap here: https://angular.dev/roadmap

What you can use in production today (Stable)

1) Signals — Stable

Signals track where and how state is consumed, reducing re-render overhead and providing a more predictable reactivity model. See the Essentials and Guide for a thorough intro.

// counter.signal.ts
import { signal, computed } from '@angular/core';

export const count = signal(0);
export const doubled = computed(() => count() * 2);

// somewhere in your UI:
count.update(n => n + 1);

Quick win: Move local component state to Signals; use computed for derived state. If you need a bridge to RxJS, use toSignal / toObservable.

2) New Control Flow — `@if`, `@for`, `@switch` (Stable)

Control flow is now built into the template; no CommonModule import needed. To migrate existing templates automatically, use the schematic:

ng generate @angular/core:control-flow

<!-- inventory.component.html -->
@if (items().length === 0) {
  <p>Inventory is empty.</p>
} @else {
  <ul>
    @for (p of items(); track p.id) {
      <li>{{ p.name }} — {{ p.price | currency }}</li>
    }
  </ul>
}

Tip: track in @for is required; it prevents unnecessary DOM churn and improves stability.

3) SSR + Hydration + Incremental Hydration — Stable

With Angular 20, route-level render modes and incremental hydration became stable. Incremental Hydration hydrates critical regions first to improve TTI.

// main.ts (client)
import { bootstrapApplication, provideClientHydration, withIncrementalHydration } 
  from '@angular/platform-browser';

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

4) Route-level render modes — Stable

Choose Client (CSR), Prerender (SSG), or Server (SSR) per route. Configuration lives in @angular/ssr.

// app.routes.server.ts
import { provideServerRendering, withRoutes, ServerRoute, RenderMode } from '@angular/ssr';

const serverRoutes: ServerRoute[] = [
  { path: '',            renderMode: RenderMode.Prerender }, // home
  { path: 'product/:id', renderMode: RenderMode.Server },    // dynamic, critical
  { path: '**',          renderMode: RenderMode.Server }
];

export const serverProviders = [
  provideServerRendering(withRoutes(serverRoutes)),
];

Watch closely (Experimental)

Resource API — Experimental

A unified, signal-first model for managing async data (e.g., HTTP results). resource / Resource is still experimental; its public surface may change.

import { resource, computed, Signal } from '@angular/core';

const userId: Signal<string> = getUserId();

export const userRes = resource({
  params: () => ({ id: userId() }),
  loader: ({ params }) => fetch(`/api/users/${params.id}`).then(r => r.json()),
});

export const firstName = computed(() => userRes.hasValue() ? userRes.value().firstName : undefined);

Zoneless — Stable (v20.2)

Zoneless entered Developer Preview in v20.0 and became stable in v20.2. Running without zone.js is now production-ready. (New apps are not zoneless by default; you opt in via provider.)

First steps: Remove zone.js polyfills and enable provideZonelessChangeDetection(). Review best practices to avoid unnecessary CD triggers and reduce zone “noise.”

Incremental adoption plan (3 steps)

Inventory
- List critical routes (SEO/conversion), heavy components, and large lists; baseline your metrics: TTFB, LCP, INP, CLS.
Micro-POCs
- Rewrite a component’s local state with Signals.
- Modernize a large list using @for + track.
- Try RenderMode.Server on a single critical route and use Incremental Hydration on the client.
Gradual rollout
- Templates: *ngIf/*ngFor → @if/@for (via schematic).
- Routes: SSR/Prerender for critical pages, CSR for the rest.
- Client: withIncrementalHydration() so “user-facing” regions hydrate first.

Common pitfalls

Don’t skip track in @for; it avoids unnecessary DOM diffs.
Don’t force every route to SSR. Use a route-based strategy.
Resource API is experimental. Validate with a small POC before anchoring big architectural decisions to it.

A note on HttpClient and v21

Community videos suggest “Angular 21 will provide HttpClient by default.” Official setup today still recommends “use provideHttpClient() when you need customization,” with withFetch() suggested for SSR and functional interceptors via withInterceptors. Track the official docs and release notes for confirmation.

Mini POCs (copy-paste)

Incremental Hydration – quick start

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

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

Route-level render modes – example setup

import { provideServerRendering, withRoutes, ServerRoute, RenderMode } from '@angular/ssr';

const serverRoutes: ServerRoute[] = [
  { path: '',            renderMode: RenderMode.Prerender },
  { path: 'product/:id', renderMode: RenderMode.Server },
  { path: '**',          renderMode: RenderMode.Server },
];

export const serverProviders = [ provideServerRendering(withRoutes(serverRoutes)) ];

Control Flow schematic – project-wide transform

ng generate @angular/core:control-flow

References (official docs & announcements)

Roadmap & general docs: Angular Roadmap — https://angular.dev/roadmap SSR/Hybrid Rendering — https://angular.dev/guide/ssr Hydration — https://angular.dev/guide/hydration Incremental Hydration — https://angular.dev/guide/incremental-hydration
Signals: Signals Essentials — https://angular.dev/guide/signals/essentials Signals Guide — https://angular.dev/guide/signals
Control Flow: Control Flow Guide — https://angular.dev/guide/templates/control-flow Control Flow Migration (schematic) — https://angular.dev/reference/migrations/control-flow
Route-level render modes / API: @angular/ssr overview — https://angular.dev/guide/ssr withRoutes / ServerRoute / RenderMode — see API from the SSR guide pages above
Resource API (experimental): Resource Guide — https://angular.dev/guide/signals/resource Resource API — https://angular.dev/api/core/Resource
Zoneless: Zoneless overview / guide & release notes (v20 → DP, v20.2 → Stable) — start from https://angular.dev and Release Notes: https://angular.dev/reference/releases
HttpClient current setup: HttpClient Setup — https://angular.dev/guide/http/setup