Seit Anfang Juni ist es so weit, Angular 22 ist an den Start gegangen. Hier die Neuerungen kurz zusammengefasst.
Neue Standards
- zoneless
Die Abkehr von Zone.js aus Performance- und Bundle-Sitze-Gründen kommt zu einem Abschluss. „Zonless“ ist bei neuen Projekten jetzt der Standard. Bestehende Projekte müssen hier erst einmal nicht direkt umstellen. Langfristig ist die Migration hin zu zoneless+OnPush+Signals aber zu empfehlen, wenn abhängige Bibliotheken das nicht verhindern.
- OnPush
Neue Komponenten verwenden nun im Standard „OnPush“, führt also nur noch bei direkten Änderungen an der Komponente (Input, Events, Signals, async-Pipe) eine Change-Detection aus und führt somit zu weit weniger Renderings.
- Vitest
Karma sagt ByeBye. Vitest ist nun in neuen Projekten der neue Standard Test Runner. Hier ein Beitrag von uns wie eine Umstellung aussehen kann: https://gedoplan.de/angular-migration-zu-vitest/
Signals Signals Signals
- Signal Forms = stable
„Da sind sie endlich“ Signals Forms sind nun auch endlich als „stable“ gekennzeichnet und schließen die unbequeme Lücke zwischen reaktiven Komponenten und Formularen. Wir haben bereits von einiger Zeit einen Blick riskiert: https://gedoplan.de/angular-formulare-reactive-zu-signals-1-2/
- Resource API = stable
Auch diese „Reaktive-Lücke“ schließt sich. Die Ressource API bekommt ebenfalls seinen „stable“ Stempel. Damit stehen uns die resource Varianten httpResource (einfache HTTP Abfragen), resource (Promise basiert) und rxResource (RxJS / Observable basiert) in unseren Projekten zur Verfügung, siehe: https://gedoplan.de/angular-resource-api/
- debounce
Analog der debounce-Funktion bei Observables, erlaubt es uns Angular nun direkt auf Basis von Signals eine verzögerte Verarbeitung (Beispiel: Suchfeld) zu aktivieren (idQuery = debounced(this.query, 500))
Dies und Das
- @Service-Decorator, als Alternative zu @Injected für eine bessere Semantic
injectAsync(), für die asynchrone injizieren von z.B. Services, ähnlich wie im Routing:- injectAsync(() => import(‚./demo-service‘).then(m => m.DemoService))
- erst bei der Verwendung (promise) wird der Service geladen und auch die Initialisierung durchgeführt (interessant bei der Verwendung von Signal-Resource auf Service-Ebene)
- HTML Syntax Erweiterungen
- Kommentare sind erlaubt
- Spread Syntax ist erlaubt
- Arrow Functions sind erlaubt
Insgesamt also ein spannender Release, der viele lose Fäden der letzten Versionen jetzt zusammen knüpft. Prima!
