Ce sunt componentele standalone?

Question

Accepted Answer

**Componentele standalone** (Angular 14+, implicite în versiunile mai recente) permit unei componente să **declare propriile dependențe direct**, fără a fi nevoie să aparțină unui `NgModule`. Ele reduc dramatic boilerplate-ul și sunt acum modul recomandat de a construi aplicații Angular. ## O componentă 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 = []; } ``` Componenta importă exact ceea ce folosește template-ul acesteia (`CommonModule` pentru `*ngFor`, `RouterLink` pentru link-uri) — dependențele sale sunt explicite și colocalizate, în loc să fie declarate într-un `NgModule` separat. ## Contrastul cu NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Inițializarea unei aplicații standalone (fără 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 ], }); ``` Aplicațiile standalone înlocuiesc root `AppModule` cu funcțiile `bootstrapApplication` și **`provideX`** — o configurație mai curată, bazată pe funcții. ## Beneficii ```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 ``` ## De ce conteaza Componentele standalone sunt **direcția modernă a Angular** — framework-ul acum generează cod scaffold standalone implicit și oferă funcții `provideX` pentru a configura funcții fără module. Ele elimină supraîncărcarea istorică a NgModule, fac dependențele explicite și locale, și simplifică lazy loading și modelul mental general. Înțelegerea standalone (și configurația `bootstrapApplication`/`provideRouter`/`provideHttpClient`) este esențială pentru a lucra cu Angular-ul actual, în timp ce cunoașterea NgModule rămâne necesară pentru codul moștenit.