Co jsou samostatné komponenty?

Question

Accepted Answer

**Samostatné komponenty** (Angular 14+, ve novějších verzích výchozí) umožňují komponentě deklarovat **své vlastní závislosti přímo**, aniž by byla součástí `NgModule`. Dramatically snižují boilerplate a nyní jsou doporučeným způsobem pro tvorbu aplikací v Angular. ## Samostatná komponenta ```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 = []; } ``` Komponenta importuje přesně to, co používá její šablona (`CommonModule` pro `*ngFor`, `RouterLink` pro odkazy) — její závislosti jsou explicitní a umístěny na stejném místě, místo aby byly deklarovány v samostatném NgModule. ## Kontrast s NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Zavedení samostatné aplikace (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 ], }); ``` Samostatné aplikace nahrazují root `AppModule` funkcemi `bootstrapApplication` a **`provideX`** — čistší, funkčně zaměřená konfigurace. ## Výhody ```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 ``` ## Proč je to důležité Samostatné komponenty jsou **moderním směrem Angular** — framework nyní ve výchozím nastavení generuje samostatné komponenty a poskytuje funkce `provideX` pro konfiguraci funkcí bez modulů. Odstraňují dlouhodobou režii NgModule, činí závislosti explicitními a lokálními, a zjednodušují lazy loading a celkový mentální model. Porozumění samostatným komponentám (a nastavení `bootstrapApplication`/`provideRouter`/`provideHttpClient`) je podstatné pro práci v současném Angular, zatímco znalost NgModule zůstává nezbytná pro starší kód.