Migrating to Angular 18, 19 and 20!

Featured image

Migrating to Angular 18, 19 and 20!

Back with round two! This time it’s Angular 18, 19 and 20, the streak that finally put signals everywhere and started (slowly) waving goodbye to Zone.js. Sharing again the official docs and migration guide with all the commands here.


Angular 18

  1. Zoneless in developer preview:
    The preview of Angular without Zone.js kicks off. Not the default yet, but you can already try it and start feeling how the change detection tree shifts.

  2. Material 3 by default:
    Angular Material switches to Material Design 3 as the default style for new components.

  3. Function-based redirects:
    The router adds redirectTo as a function, letting you build dynamic redirects based on app state instead of a fixed string.

  4. Cleaner reactive forms:
    Improvements to the Reactive Forms API for better handling of dynamic forms and their state.

  5. TypeScript 5.4 support:
    As always, riding along with the newest TS versions.


Angular 19

  1. linkedSignal and resource():
    New reactive primitives: linkedSignal for writable signals that reset based on a source signal, and resource() for handling async data reactively. To really get the combo, check this out

  2. @let in templates:
    The @let syntax goes stable, letting you declare local template variables without inventing weird workarounds. Jigsaw

  3. Incremental Hydration (preview):
    Incremental hydration powered by @defer, showing up to 40-50% LCP improvements. Still developer preview, but promising.

  4. Server Route Configuration:
    More control over the render mode per route in SSR, choosing what gets rendered server-side and what doesn’t.

  5. Improved Angular Language Service:
    Better autocomplete and diagnostics in the editor, especially when working with signals.


Angular 20

  1. Signals stable across the framework:
    What started as an experiment back in Angular 16 is now the “official” way to handle reactivity. Forms, router, everything more connected.

  2. Incremental Hydration graduates:
    Moves from developer preview to stable, locking in those SSR performance gains we talked about in v19. Freddy Krueger con sombrero de cocinero - meme nightmare on elm street

  3. Type checking on host bindings:
    The compiler now checks types on host bindings and listeners right in the template, catching errors before they blow up at runtime.

  4. Zoneless taking firm steps:
    Still not the default, but every minor gets it closer. If you were poking at the preview back in v18, in v20 it feels a lot more solid.

  5. DevTools for deferred views:
    You can now inspect incremental hydration state and @defer blocks straight from Angular DevTools.

Quick migration

To jump from any of these versions to the next one, the good old command is still your best friend:

ng update @angular/core@20 @angular/cli@20

And if you go step by step (18 → 19 → 20), even better: fewer surprises, fewer breaking changes all at once. The official update guide gives you the exact combo of commands for your current and target version, and the version matrix shows which TypeScript and Node you need at each jump.

Happy coding!

Horror icons enjoying a beer : r/midjourney