Componentes standalone

Los componentes standalone son componentes, directivas y pipes de Angular que declaran sus propias dependencias y no necesitan pertenecer a un NgModule.

En versiones anteriores de Angular cada componente debía declararse en un NgModule, y el módulo decidía qué otros componentes y pipes podían usar sus templates. Un componente standalone lista lo que necesita en su propio arreglo imports. El archivo del componente pasa a ser la descripción completa de sus dependencias. En las versiones actuales de Angular, standalone es el valor por defecto para los componentes nuevos.

La misma idea se aplica a toda la aplicación. bootstrapApplication inicia una aplicación desde un componente raíz, y funciones como provideRouter y provideHttpClient reemplazan a los módulos que antes configuraban esos servicios.

Ejemplo

@Component({
  selector: 'app-user-card',
  imports: [DatePipe],
  template: '<p>{{ user().name }}, desde {{ user().joined | date }}</p>',
})
export class UserCardComponent {
  user = input.required<User>();
}

Una ruta puede cargar con lazy loading un componente como este directamente con loadComponent, sin un módulo envoltorio.

Confusión frecuente

Standalone no significa que los NgModules se eliminaron. Los módulos existentes siguen funcionando. Un componente standalone puede importar un NgModule, y un NgModule puede importar un componente standalone. Una base de código puede pasar de forma gradual, y Angular ofrece una migración automática para la mayor parte del trabajo.

El segundo punto es el alcance. Standalone cambia cómo se declaran las dependencias del template. La forma de proveer servicios y el comportamiento del componente en tiempo de ejecución siguen igual.

Para los equipos que salen de AngularJS, el destino es más simple que antes: un solo concepto, el componente, con imports explícitos. En un microfrontend, un remoto puede exponer directamente un componente standalone o un arreglo de rutas. La referencia de AngularJS a Angular usa código standalone en todos sus ejemplos.

Términos relacionados

• Signals
• Lazy loading (carga diferida)
• Tree shaking