Que sont les composants standalone ?

Question

Accepted Answer

**Les composants standalone** (Angular 14+, par défaut dans les versions récentes) permettent à un composant de déclarer **ses propres dépendances directement**, sans avoir besoin d'appartenir à un `NgModule`. Ils réduisent considérablement le code superflu et sont désormais la manière recommandée de construire des applications Angular. ## Un composant 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 = []; } ``` Le composant importe exactement ce que son template utilise (`CommonModule` pour `*ngFor`, `RouterLink` pour les liens) — ses dépendances sont explicites et co-localisées, plutôt que déclarées dans un NgModule séparé. ## Le contraste avec les NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Amorcer une application standalone (pas de 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 ], }); ``` Les applications standalone remplacent le `AppModule` racine par `bootstrapApplication` et les fonctions **`provideX`** — une configuration plus propre et basée sur les fonctions. ## Avantages ```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 ``` ## Pourquoi c'est important Les composants standalone sont la **direction moderne d'Angular** — le framework génère désormais du code standalone par défaut et fournit des fonctions `provideX` pour configurer les fonctionnalités sans modules. Ils éliminent le surcoût longtemps présent des NgModules, rendent les dépendances explicites et locales, et simplifient le chargement lazy et le modèle mental global. Comprendre les composants standalone (et la configuration `bootstrapApplication`/`provideRouter`/`provideHttpClient`) est essentiel pour travailler dans l'Angular actuel, tandis que la connaissance des NgModules reste nécessaire pour le code hérité.