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],
  template: `
    <app-header></app-header>
    <h1>Bienvenido a la Home</h1>
  `
})
export class HomeComponent {}

Ventajas de Standalone

• Menos boilerplate: No necesitas crear un módulo para cada feature.
• Imports explícitos: Solo importas lo que usas, mejorando el tree-shaking.
• Más fácil de entender: Un componente es una unidad autocontenida.

Bootstrap de la Aplicación

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withComponentInputBinding()),
    provideHttpClient(withInterceptors([authInterceptor])),
    provideAnimationsAsync(),
  ]
}).catch(err => console.error(err));

Lazy Loading Simplificado

export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
  },
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.routes').then(m => m.SETTINGS_ROUTES)
  }
];

Directivas y Pipes Standalone

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  @HostListener('mouseenter') onMouseEnter() {
    // lógica de highlight
  }
}

@Pipe({
  name: 'capitalize',
  standalone: true
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

¿Debo migrar todo?

No es obligatorio migrar todo de golpe. Angular permite la interoperabilidad. Sin embargo, para nuevos proyectos, Standalone es el camino recomendado por el equipo de Angular.

ng generate @angular/core:standalone