Czym są komponenty standalone?

Question

Accepted Answer

**Komponenty standalone** (Angular 14+, domyślnie w nowszych wersjach) pozwalają komponentowi **bezpośrednio deklarować swoje własne zależności**, bez konieczności należenia do `NgModule`. Dramatycznie zmniejszają boilerplate i są teraz zalecanym sposobem budowania aplikacji Angular. ## Komponent standalone ```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 = []; } ``` Komponent importuje dokładnie to, czego używa jego szablon (`CommonModule` dla `*ngFor`, `RouterLink` dla linków) — jego zależności są jawne i zlokalizowane razem, zamiast być deklarowane w oddzielnym `NgModule`. ## Kontrast z NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Bootstrapping aplikacji standalone (bez 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 ], }); ``` Aplikacje standalone zastępują root `AppModule` funkcjami `bootstrapApplication` i **`provideX`** — czystszą, opartą na funkcjach konfiguracją. ## Zalety ```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 ``` ## Dlaczego to ważne Komponenty standalone są **nowoczesnym kierunkiem Angular** — framework teraz domyślnie generuje kod standalone i udostępnia funkcje `provideX` do konfigurowania funkcji bez modułów. Usuwają długotrwałe obciążenie NgModule, sprawiają, że zależności są jawne i lokalne, oraz upraszczają lazy loading i ogólny model mentalny. Rozumienie standalone (i konfiguracji `bootstrapApplication`/`provideRouter`/`provideHttpClient`) jest niezbędne do pracy z bieżącą wersją Angular, podczas gdy wiedza o NgModule jest nadal potrzebna do kodu starego typu.