New angular(v15) console frontend

[Matthbo]

Upgrade from angular.js to Angular (v15)
See #1980

[Laurens-makel]

Zelf heb ik onlangs ook een webapp van AngularJS naar Angular 15 gemigreerd en vanuit deze ervaring vallen de volgende dingen op:

• Waar zijn de unit testen? Een migratie naar een nieuwe Angular versie is het ideale moment om gelijk een goede unit test suite op te bouwen gezien je Karma en Jasmine kado krijgt van de Angular CLI. Dit gaat je enorm helpen bij toekomstige wijzigingen om bugs te ondervangen.
• Kies liever voor de inject() functie ipv constructor based injection Op deze manier kan je een abstract class maken waarin bijvoorbeeld de AppService en HttpClient eenmalig worden gedeclareerd, alle andere service classes kunnen deze abstract class extenden en deze dependencies gebruiken zonder ze zelf nogmaals te moeten declareren.
• Is er rekening gehouden met hoe change detection werkt? Zo wordt er bijvoorbeeld in de *ngFor implementaties er geen gebruik gemaakt van de trackBy functie, geen ChangeDetection.OnPush aangebracht en geen debounceTime op input velden.
• Het gebruik van jQuery of document.createElement op sommige plekken is een bad practice binnen het Angular framework.
• Veel boilerplate betreft subscription management, is het niet een idee om met een state manage library aan de slag te gaan? Zelf ben ik fan van RxAngular.
• Veel oude javascript syntax
• Het gebruik van loose comparison == ipv strict comparison === in veel gevallen

Mocht je over een van de punten vragen hebben, laat het mij dan vooral weten! We zouden eventueel ook iets kunnen plannen zodat ik het eea kan laten zien en toelichten.

[Matthbo]

Zelf heb ik onlangs ook een webapp van AngularJS naar Angular 15 gemigreerd en vanuit deze ervaring vallen de volgende dingen op:

* Waar zijn de unit testen? Een migratie naar een nieuwe Angular versie is het ideale moment om gelijk een goede unit test suite op te bouwen gezien je Karma en Jasmine kado krijgt van de Angular CLI. Dit gaat je enorm helpen bij toekomstige wijzigingen om bugs te ondervangen.

* Kies liever voor de `inject()` functie ipv constructor based injection Op deze manier kan je een abstract class maken waarin bijvoorbeeld de `AppService` en `HttpClient` eenmalig worden gedeclareerd, alle andere service classes kunnen deze abstract class extenden en deze dependencies gebruiken zonder ze zelf nogmaals te moeten declareren.

* Is er rekening gehouden met hoe change detection werkt? Zo wordt er bijvoorbeeld in de `*ngFor` implementaties er geen gebruik gemaakt van de `trackBy` functie, geen `ChangeDetection.OnPush` aangebracht en geen `debounceTime` op input velden.

* Het gebruik van jQuery of `document.createElement` op sommige plekken is een bad practice binnen het Angular framework.

* Veel boilerplate betreft subscription management, is het niet een idee om met een state manage library aan de slag te gaan? Zelf ben ik fan van [RxAngular](https://www.rx-angular.io/).

* Veel oude javascript syntax

* Het gebruik van loose comparison `==` ipv  strict comparison `===` in veel gevallen

Mocht je over een van de punten vragen hebben, laat het mij dan vooral weten! We zouden eventueel ook iets kunnen plannen zodat ik het eea kan laten zien en toelichten.

Veel van je punten staan zeker op het lijstje maar willen we stuk voor stuk doen zonder dat de hele applicatie compleet herscreven moet worden.
We willen graag van jquery af maar er zitten hier nog wat afhankelijkheden in, we hebben daarom gekozen om eerst alleen de upgrade naar angular te doen waarna wij iteratief elk component willen gaan rewriten.
Omdat alles zo stabiel mogelijk door te laten gaan doen we dit iteratief en dit is daarin de eerste stap die asap getest kan worden wanneer onze CI ons daarin kan helpen (hebben nu wat issues met de maven frontend plugin en write access voor npm/npx).
Volgende stap gaat het rewriten per component zijn waarbij unit tests maken ook een hoge prioriteit is.

Zodat we niet vergeten dat er nog belangrijke aanpassingen moet gebeuren heb ik een nieuwe epic gemaakt, #5934
Het lijkt me handig dat waarneer hieraan gewerkt gaat worden dat we met de mensen die hier ook een mening over kunnen hebben samen kunnen gaan zitten zodat we er het beste van kunnen maken

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
2 Code Smells

12.5% Coverage
0.0% Duplication

The version of Java (11.0.21) you have used to run this analysis is deprecated and we will stop accepting it soon. Please update to at least Java 17.
Read more here