Vad är standalone-komponenter?

Question

Accepted Answer

**Standalone-komponenter** (Angular 14+, standard i nyare versioner) låter en komponent deklarera sina **egna beroenden direkt**, utan att behöva tillhöra en `NgModule`. De minskar drastiskt på boilerplate och är nu det rekommenderade sättet att bygga Angular-appar. ## 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 importerar exakt det som dess mall använder (`CommonModule` för `*ngFor`, `RouterLink` för länkar) — dess beroenden är explicita och samplokaliserade, snarare än deklarerade 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 ``` ## Bootstrap av 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-appar ersätter root-`AppModule` med `bootstrapApplication` och **`provideX`**-funktioner — en renare, funktionsbaserad konfiguration. ## Fördelar ```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 ``` ## Varför det spelar roll Standalone-komponenter är **den moderna riktningen för Angular** — ramverket scaffoldar nu standalone som standard och tillhandahåller `provideX`-funktioner för att konfigurera funktioner utan moduler. De tar bort den långvariga NgModule-overheaden, gör beroenden explicita och lokala, och förenklar lazy loading och den övergripande mentala modellen. Att förstå standalone (och `bootstrapApplication`/`provideRouter`/`provideHttpClient`-konfigurationen) är väsentligt för att arbeta i nuvarande Angular, medan NgModule-kunskap fortfarande behövs för äldre kod.