Cosa sono i componenti standalone?

Question

Accepted Answer

**Componenti standalone** (Angular 14+, predefinito nelle versioni più recenti) permettono a un componente di dichiarare **le sue stesse dipendenze direttamente**, senza dover appartenere a un `NgModule`. Riducono drasticamente il boilerplate e sono ora il modo consigliato per costruire app Angular. ## Un componente 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 = []; } ``` Il componente importa esattamente ciò che il suo template utilizza (`CommonModule` per `*ngFor`, `RouterLink` per i link) — le sue dipendenze sono esplicite e collocate localmente, piuttosto che dichiarate in un NgModule separato. ## Il contrasto con NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Bootstrap di un'app standalone (senza 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 ], }); ``` Le app standalone sostituiscono il root `AppModule` con `bootstrapApplication` e funzioni **`provideX`** — una configurazione più pulita e basata su funzioni. ## Vantaggi ```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 ``` ## Perché è importante I componenti standalone sono la **direzione moderna di Angular** — il framework ora effettua lo scaffolding standalone per impostazione predefinita e fornisce funzioni `provideX` per configurare le funzionalità senza moduli. Eliminano il consolidato overhead di NgModule, rendono le dipendenze esplicite e locali, e semplificano il lazy loading e il modello mentale complessivo. Comprendere lo standalone (e la configurazione `bootstrapApplication`/`provideRouter`/`provideHttpClient`) è essenziale per lavorare con Angular attuale, mentre la conoscenza di NgModule rimane necessaria per il codice legacy.