In eerdere versies van Angular moest elke component deel uitmaken van een module. Zelfs de eenvoudigste component kon niet zelfstandig bestaan — deze moest worden gedeclareerd binnen een NgModule.

Dit was vergelijkbaar met het nodig hebben van een hele keuken om slechts een kopje thee te zetten. Klinkt omslachtig, toch?

Daarom is het Angular-team in de loop der tijd begonnen met het vereenvoudigen van de structuur. Dit heeft geleid tot de introductie van een nieuwe benadering — Standalone Components.

Wat is een Standalone Component?

Om er een te maken, voeg je eenvoudig de vlag standalone: true toe binnen de @Component decorator en geef je eventuele vereiste afhankelijkheden op via de imports array:

Hier is het toevoegen van standalone: true een speciale optie binnen de @Component decorator die aan Angular aangeeft dat deze component onafhankelijk is — het hoeft niet gedeclareerd te worden in een NgModule.

Daarnaast geven we een lijst van externe afhankelijkheden (imports) op die de component nodig heeft. In de traditionele module-gebaseerde aanpak werden deze afhankelijkheden aan de imports van de module toegevoegd. Maar wanneer componenten zonder module werken, moeten hun afhankelijkheden direct binnen de component worden gedeclareerd — en Angular fungeert intern als een module voor die component.

Waarom stapt Angular af van NgModules?

NgModules speelden een belangrijke rol in grote applicaties:

• Ze hielpen bij het organiseren van de code;

• Ze gaven controle over de scope (zichtbaarheid);

• Ze waren nuttig voor optimalisatie.

Maar na verloop van tijd werd duidelijk dat veel van deze zaken ook op componentniveau kunnen worden uitgevoerd — eenvoudiger en intuïtiever.

Met andere woorden, standalone componenten zijn de moderne manier om componenten te bouwen zonder modules. Ze vereenvoudigen de structuur, maken componenten zelfvoorzienend en gemakkelijker in gebruik.

Angular blijft modules ondersteunen, maar raadt aan om standalone componenten te gebruiken voor nieuwe code.