Auteur: Danny Holstein

In oktober 2024 heb ik een blogbericht geschreven met de titel: Angular 18 – een tussenstand en een korte terugblik. In de tussentijd zijn er drie grote releases geweest van Angular. In dit nieuwe blogbericht wordt van versie 21 tot versie 19 teruggekeken. In deze drie laatste versies zijn er grote veranderingen toegepast en verschillende trends te bespeuren.

In de laatste drie versies zijn er verschuivingen en trends waar te nemen. De eerste is de zogenaamde ‘signal revolutie’ of de Signals First architectuur waarbij de nadruk komt te liggen op Angular Signals in plaats van RxJS (Reactive Extensions for JavaScript) voor reactiviteit en state management. De verwachting is dat in toekomstige versies van Angular er meer op signals gebaseerde API’s zullen verschijnen.

De tweede grote trend is de Zoneless migratie voor change detection waarbij stap-voor-stap het pakket Zone.js en al zijn dependencies is verwijderd. Nieuwe Angular applicaties zullen standaard Zoneless zijn met verbeterde prestaties. Met de komst van verschillende AI-tools is er ook binnen Angular een grotere nadruk komen te liggen op de integratie van AI door middel van MCP servers. Daarnaast zijn de nodige optimalisaties doorgevoerd die leiden tot een kleinere bundle en snellere builds van de applicatie.

Een andere grote trend is SSR – Server Side Rendering – dat aanzienlijk verbeterd is en meer ‘developer friendly’ is geworden. Voor eerdere versies van Angular moest Angular Universal worden ingesteld, dat niet alleen complex is, maar ook lastig is om in te stellen. In de afgelopen drie versies zijn de nodige verbeteringen toegepast voor SSR en is er bovendien een belangrijke security fix geweest.

Het Angular team heeft ook gewerkt om de Developer Experience te verbeteren door meer versimpelde API’s aan te bieden, betere tools beschikbaar te maken en het testen van applicaties te verbeteren. Vitest is de standaard test-runner geworden in Angular 21. De tools zijn beter geïntegreerd in de CLI (Command Line Interface). Verder wordt de Angular syntax verder versimpeld door achtervoegsels te verwijderen en de structurele directives plaats te laten maken voor de control flow. In toekomstige versies zal er veel aandacht komen te liggen op toegankelijkheid (accessibility) met de komst van het pakket: Angular Aria (Aria = Accessible Rich Internet Applications).

De (nu nog) experimentele Signal Forms is een van de grootste toevoeging in Angular 21. In een eerder blogbericht heb ik hier uitvoerig over geschreven. In de minor releases (Angular 21.1 en 21.2) zijn de Signal Forms verder geëvolueerd. Samengevat zijn de Signal Forms een nieuwe forms API waarmee op een makkelijkere manier formulieren gemaakt worden en een betere reactiviteit hebben dankzij signals.

Andere veranderingen in Angular 21 zijn dat de HttpClient standaard wordt toegevoegd. Maar de HttpClient moet alsnog expliciet worden toegevoegd wanneer er gebruik gemaakt wordt van interceptors. Nieuwe applicaties die gebruik maken van Angular 21 zijn standaard Zoneless (maken geen gebruik van Zone.js voor change detection).

De deprecated Karma test-runner is in Angular 21 vervangen door Vitest. Over deze nieuwe standaard test-runner zal ik later een apart blogbericht schrijven. In Angular 21 (minor versie 21.2) is er ook Prettier toegevoegd voor nieuwe Angular projecten. Bestanden die worden gemaakt en of gewijzigd, worden automatisch geformatteerd dankzij Prettier.

Ook zijn er veel veranderingen in de templates van Angular 21. Het is nu mogelijk om de spread operator (om op een makkelijke manier objecten/arrays in een nieuw object/array te kopiëren), arrow functies (hoewel nog niet alles mogelijk is – arrow functies zorgen voor beknoptere code) en zelfs Reguliere Expressies in templates te gebruiken.

Ook de bestaande control flow wordt verder aangepast. In het bijzonder de @switch control flow waar nu meerdere @case blokken achter elkaar gebruikt kunnen worden. Ook is er @default never toegevoegd waarmee alle opties – uit het voorbeeld hieronder de variabele paymentStatus – benut moeten worden. Wanneer er later een betaalstatus ‘Refund’ voor terugbetalen wordt toegevoegd, dan zal de compiler een fout aangeven dat deze nieuwe optie nog niet benut is in een @case blok.

Ook is er een nieuw @angular/aria pakket geïntroduceerd. Dit dient om headless en accessible directives te voorzien voor de gewoonlijke ARIA-patronen. Hiermee kunnen toetsenbord interacties worden afgehandeld, ARIA attributen worden gemaakt, focus mangement worden toegepast en is er ondersteuning voor screen readers. De directives uit @angular/aria zijn gebouwd op CDK (Component Development Kit) en zijn ontwikkeld door het Angular Material team. Wel is dit pakket nog in developer preview en het bevat nog niet alle directives en componenten.

Een grote verandering is dat Angular 20 een Node.js versie van 20 of hoger nodig heeft. Wanneer er tijdens de ontwikkeling geschakeld moet worden tussen Node.js versies, dan kan daarvoor NVM (Node Version Manager) worden gebruikt dat het mogelijk maakt om meerdere Node.js versies te installeren.

In Angular 20 zijn de signal API’s (zoals: effect, linkedSignal) stabiel en niet langer in developer preview. In Angular 20 heeft de control flow (met @if, @for, @switch) de voorkeur gekregen over de bestaande structurele directives (*ngIf, *ngFor, *ngSwitch) die deprecated zijn. De control flow heeft niet alleen betere prestaties maar is ook meer developer friendly en makkelijker in gebruik.

Een andere opvallende verandering is dat het pakket @angular/animations als deprecated is gemarkeerd. Wanneer een applicatie gebruik maakt van Angular Material dan moet dit pakket alsnog geïnstalleerd worden. Dit pakket werd niet al niet meer onderhouden, het is te complex en te groot en bovendien zijn animaties die alleen in CSS worden geschreven veel sneller. Angular 20 biedt de mogelijkheid om elementen te animeren met de syntax: animate.enter/animate.leave. Er kunnen hiermee classes worden toegevoegd aan een element wanneer het de DOM (Document Object Model) binnenkomt of verlaat. Deze classes worden door Angular verwijderd wanneer de daarmee verbonden animatie is voltooid.

In Angular 20 zijn ook andere operatoren mogelijk geworden in de templates. Een voorbeeld daarvan is de ‘in’ operator. Ook zijn er in de templates machtsverheffingen mogelijk (normaal gesproken in JavaScript met de Math.pow functie). Een andere toevoeging zijn de tagged template literals. Met deze feature kunnen waardes worden geformatteerd, gesaniteerd en of waardes worden veranderd. Het kan eveneens helpen tijdens het loggen of debuggen waarbij de waardes onderschept worden voordat deze worden weergegeven.

In Angular 19.2 was er al meer ondersteuning voor backticks (`) toegevoegd (zoals in het tweede voorbeeld hierboven). Voorheen werden backticks (`) door de template parser van Angular helemaal verworpen. Verder zijn de nieuwe tagged template literals niet alleen te combineren met de ingebouwde pipes en andere functies, maar ook zijn deze te gebruiken binnen HTML-attributen.

Overigens is Angular 20 een van de weinige versies die 3 minor releases heeft gehad. De derde minor release bevatte een zeer belangrijke security update voor SSR (Server Side Rendering). De hoofdreden hiervoor is dat er een kwetsbaarheid was gevonden in de pakketten van platform-server/ssr. Dit is tegelijkertijd een ‘brekende verandering’ die ook is toegepast op alle andere LTS-versies (LTS = Long Term Support) van Angular. De kwetsbaarheid houdt in dat een aanvaller potentieel meerdere requests kan versturen en de responsen daarvan kan inspecteren voor gelekte informatie van andere gebruikers in SSR applicaties.

De nieuwe benadering introduceert een BootstrapContext die doorgegeven wordt aan de bootstrapApplication() functie. Deze context voorziet een platform referentie dat ‘in een specifiek bereik’ (scope) is en in relatie staat met het individuele HTTP-request. Dit laatste verzekert dat iedere server-side-rendering een geïsoleerde platform-injector heeft en responsen niet meer gelekt worden.

Angular 19 is de laatste versie die Node.js v18 ondersteuning heeft en alle latere versies hebben Node.js v20 nodig. In Angular 19 zijn de Resource- en HttpResource API geïntroduceerd. Dit zijn allebei experimentele API’s om asynchrone operaties te beheren met ingebouwde caching en foutenafhandeling door middel van signals. In een eerder blogbericht heb ik uitvoerig over de Resource- en HttpResource API’s geschreven.

In Angular 19 zijn linked signals geïntroduceerd en dit is een nieuwe reactieve signal die afhankelijk is van een source signal. Een linkedSignal is een writable signal die automatisch zijn waarde opnieuw zal instellen wanneer de opgegeven source signal verandert. Dit adresseert een gewoonlijk probleem waarbij een afgeleide standaardwaarde moet updaten wanneer de bron/source veranderd. Dit laatste is niet mogelijk met alleen writable- en computed signals - en linked signals die overbruggen dit probleem.

Daarnaast zijn er vele andere veranderingen toegepast in Angular 19. Zoals dat componenten standaard standalone zijn. Er zijn ook veranderingen geweest in de templates van Angular 19. Zo is de @let template variabele syntax nu productie klaar en dit maakt het mogelijk dat een lokale variabele in het template kan worden gebruikt. Deze feature versimpelt het proces van het definiëren en hergebruiken van variabelen binnen templates. Wel zijn deze read-only en alleen geldig binnen het template zelf en zijn descendants.

In Angular 19 is de Developer Experience verder verbeterd door middel van HMR (Hot Module Replacement). Dit wil zeggen dat veranderingen in templates en style-bestanden direct worden toegepast in de browser. Met HMR wordt in development modus de pagina niet opnieuw geladen en wordt de  applicatie niet opnieuw gebouwd (dit laatste kan de nodige tijd kosten). De stijl-veranderingen zijn meteen te zien in de browser, zonder dat de state van de applicatie verloren gaat. Bovendien wordt dankzij HMR de ontwikkeling van applicaties versneld en dat is groot voordeel voor de Developer Experience.

Ieder half jaar wordt een nieuwe Angular versie gepubliceerd. Het Angular framework is zeer aan verandering onderhevig en veel in beweging. In dit nieuwe blogbericht heb ik de grote trends besproken, zoals: de ‘signal revolutie’, Zoneless migratie, meer AI-integratie, de voortgaande evolutie van Signal Forms, de nadruk op prestaties en een verbeterde developer experience.