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 complete 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 leidde tot de introductie van een nieuwe benadering — Standalone Components.

Wat is een Standalone Component?

Om er een te maken, voegt u eenvoudig de vlag standalone: true toe binnen de @Component decorator en specificeert u eventuele vereiste afhankelijkheden met behulp van de imports array:

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

Daarnaast specificeren we een lijst van externe afhankelijkheden (imports) 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 een 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:

• Zij hielpen bij het organiseren van de code;

• Zij boden controle over de scope (zichtbaarheid);

• Zij waren nuttig voor optimalisatie.

Maar na verloop van tijd werd duidelijk dat veel van deze zaken ook op componentniveau kunnen worden geregeld — 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 standalone componenten te gebruiken voor nieuwe code.