Arquitectura sin Módulos: Guía de Componentes Standalone
Durante mucho tiempo, los NgModules fueron una barrera de entrada alta para nuevos desarrolladores y una fuente de complejidad en aplicaciones grandes. Los Standalone Components cambian las reglas del juego permitiendo que componentes, directivas y pipes sean independientes.
¿Qué es un componente Standalone?
Es un componente que no necesita ser declarado en un NgModule. Define sus propias dependencias directamente.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';
@Component({
selector: 'app-home',
standalone: true,
imports: [CommonModule, HeaderComponent], // Importamos lo que usamos aquí
template: `
<app-header></app-header>
<h1>Bienvenido a la Home</h1>
`
})
export class HomeComponent {}Bootstrap de la Aplicación
En una aplicación totalmente Standalone, ya no necesitamos AppModule. El archivo main.ts cambia la forma de iniciar la app:
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';
bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes),
provideHttpClient(),
// Otros providers globales van aquí
]
}).catch(err => console.error(err));Lazy Loading Simplificado
El enrutamiento (Lazy Loading) se vuelve mucho más directo. Ya no necesitas cargar un módulo hijo, puedes cargar el componente directamente.
export const routes: Routes = [
{
path: 'admin',
loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)
},
// También puedes cargar rutas hijas sin módulos
{
path: 'settings',
loadChildren: () => import('./settings/settings.routes').then(m => m.SETTINGS_ROUTES)
}
];¿Debo migrar todo?
No es obligatorio migrar todo de golpe. Angular permite la interoperabilidad: puedes importar componentes standalone dentro de módulos existentes y viceversa. Sin embargo, para nuevos proyectos, Standalone es el camino recomendado por el equipo de Angular.