Auteur: Danny Holstein

Eind mei 2025 is Angular 20 gepubliceerd met verschillende nieuwe features en optimalisaties. Bestaande Angular applicaties kunnen hiervoor een upgrade krijgen. De bestaande schematics van Angular 20 nemen al het een-en-ander uit handen wanneer dit uitgevoerd wordt met het commando ng update. In dit nieuwe blogbericht worden een aantal zaken behandeld die zich voordeden tijdens het upgraden van Angular applicaties naar de nieuwste versie.

De Angular Style Guide met aanbevelingen voor codeerstijlen heeft een opmerkelijke verandering. Namelijk dat het keyword protected gebruikt dient te worden voor properties die alleen toegankelijk zijn in het template. Daarnaast is er de aanbeveling om het keyword readonly te gebruiken voor alle properties die worden geïnitialiseerd door Angular, zoals: input(), output(), model(), etc.

Wanneer een organisatie zowel veel als grote projecten heeft, dan is het ondoenlijk om deze twee keywords te kopiëren en te plakken in alle componenten. Hier komt wederom mijn eigen Angular migratie tool om de hoek kijken en deze is voorzien van functionaliteit om dit in ieder component te doen. Het voordeel is dat er veel kopieer- en plakwerk wordt bespaard.

Zoals in de inleiding vermeld, heeft Angular 20 verschillende schematics die werk uit handen nemen tijdens een upgrade. Een voorbeeld hiervan is de schematic die het pakket @angular-devkit/build-angular vervangt door @angular/build en ook wijzigingen toepast in het bestand angular.json. Het voordeel is dat na een installatie (met het commando npm install of korter: npm i) de folder/map node_modules nu bijna 200MB minder groot is.

Het pakket @angular/platform-browser-dynamic is nu deprecated ten gunste van het pakket: @angular/platform-browser. In eerdere versies van Angular diende dit pakket om de root-module te laden en de applicatie in de browser op te starten. Echter op dit moment van schrijven ontbreekt hiervoor een schematic om dit eerste pakket te verwijderen. Mijn eigen Angular Migration Tool verwijdert dit pakket uit package.json.

Tijdens onderhoud van een applicatie waar lange tijd niet naar is gekeken en is gemaakt ten tijde van Angular 9, zijn de deprecated toPromise() functies tegengekomen. Visual Studio Code is zeer behulpzaam met het tonen van deprecated code door dit door te strepen:

De reden van de deprecation is dat er met deze functie geen onderscheid wordt gemaakt wanneer er geen waarde of undefined wordt uitgezonden. In de voorbeeldcode hieronder zendt de linker Observable geen waarde uit en completeert deze meteen. De rechter Observable zendt undefined uit. De functie toPromise() zal echter in beide gevallen undefined opleveren en dat is een onjuiste werking.

In RxJS versie 8 zal deze functie compleet worden verwijderd. Dit zal ten gunste zijn van de RxJS operatoren firstValueFrom en lastValueFrom. De eerste voorbeeldcode van deze paragraaf kan daarom als volgt worden geschreven:

Bootstrap 5 – een populaire library om responsive websites te maken – verliest tegenwoordig aan populariteit ten gunste van Tailwind dat meer controle, flexibiliteit en aanpassingen biedt. Bootstrap 5 wordt nog wel gebruikt, maar wordt ook gezien als ‘verouderd’. Wanneer een Angular applicatie die gebruik maakt van Bootstrap 5 wordt opgestart dan worden in de terminal meerdere deprecation warnings getoond.

Deze waarschuwingen zijn afkomstig uit de Bootstrap 5 library zelf. Een ander nadeel van Bootstrap 5 is dat deze library niet meer regelmatig wordt onderhouden en hierdoor is het een stuk onwaarschijnlijker dat bovenstaande waarschuwingen op korte termijn zullen worden verholpen. Een tijdelijke oplossing is om in angular.json deze waarschuwingen uit te zetten – zie de afbeelding hieronder:

Wanneer een Angular applicatie onderhouden moet worden, dan is het beter om Bootstrap 5 te vervangen door Tailwind of door gebruik te gaan maken van Angular Material. Tailwind kan onder andere gebruikt worden om in ieder geval de stijl te behouden van de applicatie. De functionaliteit van componenten is in Angular Material veel beter dan het geval is met Bootstrap 5.