Angular Standalone Components: Guía Completa para Simplificar tus Aplicaciones

¿Qué son los Standalone Components?

Los Standalone Components son una característica de Angular que elimina la necesidad de NgModules para la mayoría de casos de uso. Esto simplifica drásticamente la estructura de las aplicaciones Angular y reduce el boilerplate.

Ventajas de los Standalone Components

• Menos código: No necesitas crear NgModules para cada feature
• Más intuitivo: Las dependencias se declaran directamente en el componente
• Mejor tree-shaking: Solo se incluye el código que realmente usas
• Lazy loading simplificado: Cargar componentes bajo demanda es más fácil

Creando tu Primer Standalone Component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="profile">
      <h2>{{ userName }}</h2>
      <input [(ngModel)]="userName" />
    </div>
  `
})
export class UserProfileComponent {
  userName = 'Osman Jimenez';
}

Migrando de NgModules a Standalone

Paso 1: Convertir componentes existentes

Angular CLI ofrece un comando para migrar automáticamente:

ng generate @angular/core:standalone

Paso 2: Actualizar imports

En lugar de declarar en un módulo:

// Antes (con NgModule)
@NgModule({
  declarations: [MyComponent],
  imports: [CommonModule]
})

// Después (Standalone)
@Component({
  standalone: true,
  imports: [CommonModule]
})

Routing con Standalone Components

El routing se simplifica enormemente:

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'home',
    loadComponent: () => import('./home/home.component')
      .then(m => m.HomeComponent)
  },
  {
    path: 'profile',
    loadComponent: () => import('./profile/profile.component')
      .then(m => m.ProfileComponent)
  }
];

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
});

Servicios y Dependency Injection

Los servicios se pueden proporcionar de varias formas:

// 1. A nivel de aplicación (recomendado)
@Injectable({
  providedIn: 'root'
})
export class UserService { }

// 2. A nivel de componente
@Component({
  standalone: true,
  providers: [UserService]
})

// 3. A nivel de ruta
{
  path: 'admin',
  loadComponent: () => import('./admin.component'),
  providers: [AdminService]
}

Compartiendo Funcionalidad

Para compartir imports comunes, crea archivos de utilidad:

// shared-imports.ts
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';

export const SHARED_IMPORTS = [
  CommonModule,
  FormsModule,
  MatButtonModule
] as const;

// Uso en componentes
@Component({
  standalone: true,
  imports: [...SHARED_IMPORTS]
})

Testing de Standalone Components

Los tests son más simples sin NgModules:

describe('UserProfileComponent', () => {
  it('should create', async () => {
    await TestBed.configureTestingModule({
      imports: [UserProfileComponent] // Solo importa el componente
    }).compileComponents();
    
    const fixture = TestBed.createComponent(UserProfileComponent);
    expect(fixture.componentInstance).toBeTruthy();
  });
});

Mejores Prácticas

1. Usa standalone por defecto: Para nuevos proyectos, comienza con standalone desde el inicio
2. Importa solo lo necesario: Aprovecha el tree-shaking importando módulos específicos
3. Organiza por features: Agrupa componentes relacionados en carpetas
4. Lazy load cuando sea posible: Mejora el rendimiento cargando componentes bajo demanda

Conclusión

Los Standalone Components representan el futuro de Angular. Simplifican el desarrollo, mejoran el rendimiento y hacen que el código sea más mantenible. Si estás empezando un nuevo proyecto, no hay razón para no usar standalone. Si tienes un proyecto existente, considera migrar gradualmente para aprovechar estos beneficios.

¿Ya has migrado a Standalone Components? ¿Qué ha sido lo más desafiante en tu experiencia?