Was sind Standalone-Komponenten?

Question

Accepted Answer

**Standalone-Komponenten** (Angular 14+, in neueren Versionen Standard) ermöglichen es einer Komponente, **ihre eigenen Abhängigkeiten direkt zu deklarieren**, ohne einem `NgModule` angehören zu müssen. Sie reduzieren Boilerplate erheblich und sind nun die empfohlene Methode zum Erstellen von Angular-Apps. ## Eine Standalone-Komponente ```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 = []; } ``` Die Komponente importiert genau das, was ihr Template verwendet (`CommonModule` für `*ngFor`, `RouterLink` für Links) — ihre Abhängigkeiten sind explizit und zusammengefasst, anstatt in einem separaten NgModule deklariert zu werden. ## Der Kontrast zu NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Bootstrapping einer Standalone-App (kein 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 ersetzen das Root-`AppModule` durch `bootstrapApplication` und **`provideX`**-Funktionen — eine sauberere, funktionsbasierte Konfiguration. ## Warum es wichtig ist Standalone-Komponenten sind die **moderne Richtung von Angular** — das Framework erstellt nun Standalone-Komponenten standardmäßig und bietet `provideX`-Funktionen zur Konfiguration von Funktionen ohne Module. Sie beseitigen den lange bestehenden NgModule-Overhead, machen Abhängigkeiten explizit und lokal, und vereinfachen Lazy Loading und das Gesamtkonzept. Das Verständnis von Standalone (und der `bootstrapApplication`/`provideRouter`/`provideHttpClient`-Konfiguration) ist für die Arbeit mit modernem Angular unverzichtbar, während NgModule-Kenntnisse weiterhin für Legacy-Code erforderlich sind. ## Vorteile ```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 ```