Hvad er standalone-komponenter?

Question

Accepted Answer

**Standalone-komponenter** (Angular 14+, standard i nyere versioner) lader en komponent erklære **sine egne afhængigheder direkte**, uden at være medlem af en `NgModule`. De reducerer boilerplate dramatisk og er nu den anbefalede måde at bygge Angular-apps på. ## En standalone-komponent ```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 = []; } ``` Komponenten importerer præcis det, som dens skabelon bruger (`CommonModule` til `*ngFor`, `RouterLink` til links) — dens afhængigheder er eksplicitte og samlet, i stedet for at blive erklæret i en separat NgModule. ## Kontrasten med NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Opstart af en standalone-app (ingen 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 erstatter root `AppModule` med `bootstrapApplication` og **`provideX`**-funktioner — en renere, funktionsbaseret konfiguration. ## Fordele ```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 ``` ## Hvorfor det betyder noget Standalone-komponenter er **retningen for moderne Angular** — frameworks stilladser nu standalone som standard og giver `provideX`-funktioner til at konfigurere funktioner uden moduler. De fjerner den langvarige NgModule-overhead, gør afhængigheder eksplicitte og lokale, og forenkler lazy loading og den overordnede mentale model. At forstå standalone (og `bootstrapApplication`/`provideRouter`/`provideHttpClient`-opsætningen) er væsentligt for at arbejde i nuværende Angular, mens NgModule-viden stadig er nødvendig for legacy-kode.