Angular 19 to 20 Update Guide

Angular 20 Release Date

May 28, 2025

🔧 Prerequisites Before Updating

• Node.js ^18.13.0 or ^20.9.0
• NPM >= 8.19.4
• Angular CLI 19 already installed

Check your current version:

ng version

📦 Update Angular CLI & Core Packages

Run the official update command:

ng update @angular/cli @angular/core

If using Angular Material:

ng update @angular/material

To see what else needs updating:

ng update

⚙️ Key Updates in Angular 20

1. Signal-Based Components (Stable)

Angular 20 officially supports Signal-based components as a stable API.

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

@Component({
  standalone: true,
  selector: 'app-counter',
  template: `<button (click)="count.update(c => c + 1)">Count: {{ count() }}</button>`
})
export class CounterComponent {
  count = signal(0);
}

Signals are Angular’s reactive primitive, a lightweight alternative to RxJS for local state.

2. Improved Hydration (SSR & SSG)

Better support for Server Side Rendering (SSR) and Static Site Generation (SSG) using Angular Universal.

• Hydration is enabled by default
• Improved DOM diffing for performance

provideClientHydration() // used in `main.ts`

3. Built-in Control Flow (Stable)

Angular 20 stabilizes @if, @for, @switch, and @defer.

@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
}

4. Zoneless Angular (Experimental)

• Angular 20 introduces experimental support for running without Zone.js.
• Use signals or manual change detection.

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

5. Destructuring in Templates

Now you can destructure arrays or objects in templates:

@for (([key, value], i) of entries) {
  <div>{{ key }}: {{ value }}</div>
}

6. Router Enhancements

• New RouterOutlet events for lifecycle hooks
• Easier nested routing for standalone components
• Signals integrated with router parameters

7. Vite & esbuild Integration (Stable)

• Angular CLI now uses esbuild and Vite under the hood for dev and build tasks.
• Faster rebuilds and HMR.

8. Component Inputs as Functions

• You can now define input functions in signals-based components.

@Component({...})
export class MyComponent {
  @Input() value = input<number>();
}

🔄 Optional: Enable Strict Template Checking

Update tsconfig.app.json:

{
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}

🧪 Test Your App After Updating

Run:

ng test
ng serve

🧹 Clean Up (Post Migration)

• Remove unused Zone.js if going zoneless
• Refactor components to use Signals or built-in control flow
• Replace *ngIf, *ngFor with @if, @for if desired