¿Qué son los componentes standalone?

Question

IT Interview Practice · 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.

Un componente standalone

El contraste con NgModules

Arranque de una aplicación standalone (sin AppModule)

Beneficios

Por qué es importante

Preguntas relacionadas