Wat zijn standalone components?

Question

Accepted Answer

**Standalone components** (Angular 14+, standaard in nieuwere versies) stellen een component in staat om **zijn eigen afhankelijkheden rechtstreeks te declareren**, zonder dat het deel hoeft uit te maken van een `NgModule`. Ze verminderen boilerplate drastisch en zijn nu de aanbevolen manier om Angular-apps te bouwen. ## Een standalone component ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← no NgModule needed imports: [CommonModule, RouterLink], // ← declare dependencies HERE, on the component template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` De component importeert precies wat zijn template gebruikt (`CommonModule` voor `*ngFor`, `RouterLink` voor links) — zijn afhankelijkheden zijn expliciet en samen geplaatst, in plaats van in een afzonderlijke NgModule te worden gedeclareerd. ## Het contrast met NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Bootstrapping van een standalone app (geen AppModule) ```ts import { bootstrapApplication } from "@angular/platform-browser"; import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // configure router functionally provideHttpClient(), // HttpClient without HttpClientModule ], }); ``` Standalone apps vervangen de root `AppModule` met `bootstrapApplication` en **`provideX`** functies — een schonere, op functies gebaseerde configuratie. ## Voordelen ```text ✓ Less boilerplate — no NgModule files to maintain ✓ Explicit dependencies — see exactly what a component uses ✓ Easier lazy loading — loadComponent() directly ✓ Simpler mental model — components are self-contained units ✓ Better tree-shaking potential ``` ## Waarom het belangrijk is Standalone components zijn de **moderne richting van Angular** — het framework scaffolds nu standaard standalone en biedt `provideX` functies om functies zonder modules te configureren. Ze verwijderen de langdurige NgModule overhead, maken afhankelijkheden expliciet en lokaal, en vereenvoudigen lazy loading en het algemene mentale model. Het begrijpen van standalone (en de `bootstrapApplication`/`provideRouter`/`provideHttpClient` setup) is essentieel voor het werken met huidge Angular, terwijl NgModule-kennis nog steeds nodig is voor verouderde code.