Upgrading to Angular 21

[CodeKrakken]

Upgrading to Angular 21 is going to present a few issues. Quick list -

• Libraries (zoneless)
• Functions (zoneless)
• Tests (now Vitest, not Karma/Jasmine)
• HttpClient functions
• Template checking and type safety strengthening
• Signal forms introduced

Detail -

• Angular 21 makes zoneless change detection the default for new apps: the framework no longer relies on zone.js by default. Instead it uses a “signals + explicit reactivity” model for change detection. If any third-party libraries rely on zone.js to trigger UI updates after asynchronous operations (e.g. setTimeout, Observables, HTTP responses, timers, external callbacks), removing zone.js (or switching to zoneless) can lead to UI not updating correctly, unless you refactor to use signals, manual markForCheck(), or otherwise trigger change detection explicitly.
• Our native asynchronous functions may also be affected by the shift to zoneless and removal of zone.js.
• Default test runner is now Vitest, not Karma/Jasmine, so tests may need refactoring.
• HttpClient functions may need to be refactored as HttpClientModule and provideHttpClient are now provided by default so native nomenclature may differ.
• Angular 20+ strengthens template checking and type safety so we may need to refactor our types in a few places.
• Whilst there is support for existing forms, they may not work well with new Signal forms.

There is detailed information regarding these changes here, including a complete migration ticket list to cover the upgrade.

Dependencies to check for Angular 21 and zoneless mode support

• Angular Material
• NgRx
• Formly
• ag-Grid
• Monaco Editor
• Dexie
• Lodash-es
• Any Angular wrappers around non-Angular libraries
• Any libraries that rely on zone.js patching

Functions to check for whether they rely on implicit change detection via Zone.js

• setTimeout, setInterval
• Timers, callbacks
• Manual DOM element events
• Direct calls inside Services that update component fields
• Custom event emitters
• Websocket handlers
• RxJS subscriptions without async pipe
• Calls requiring manual change-detection triggering

Checks for use of

• ReactiveForms
• Template-driven forms
• Dynamic Formly forms