¿Qué son los componentes standalone?

Question

Accepted Answer

**Los componentes standalone** (Angular 14+, estándar en versiones más recientes) permiten que un componente declare **sus propias dependencias directamente**, sin necesidad de pertenecer a un `NgModule`. Reducen drásticamente el boilerplate y ahora son la forma recomendada de construir aplicaciones 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 = []; } ``` El componente importa exactamente lo que utiliza su plantilla (`CommonModule` para `*ngFor`, `RouterLink` para enlaces) — sus dependencias son explícitas y colocadas en el mismo lugar, en lugar de declararse en un NgModule separado. ## El contraste con NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Arranque de una aplicación standalone (sin 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 ], }); ``` Las aplicaciones standalone reemplazan el `AppModule` raíz con `bootstrapApplication` y funciones **`provideX`** — una configuración más limpia y basada en funciones. ## Beneficios ```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 ``` ## Por qué es importante Los componentes standalone son la **dirección moderna de Angular** — el framework ahora genera scaffolding de componentes standalone por defecto y proporciona funciones `provideX` para configurar características sin módulos. Elimina la sobrecarga histórica de NgModule, hacen las dependencias explícitas y locales, y simplifican la carga lazy y el modelo mental general. Comprender los componentes standalone (y la configuración `bootstrapApplication`/`provideRouter`/`provideHttpClient`) es esencial para trabajar en Angular actual, mientras que el conocimiento de NgModule sigue siendo necesario para código heredado.