¿Qué es Standalone en Angular?
Standalone es una característica introducida en Angular 14 que permite crear componentes, directivas y pipes sin necesidad de módulos (NgModule). Esto simplifica la estructura del código y mejora la carga optimizada de la aplicación.
Beneficios de Standalone
✔ Menos código y más simplicidad → No necesitas definir módulos.
✔ Mejor rendimiento → Carga optimizada de dependencias.
✔ Mayor flexibilidad → Puedes importar y usar componentes sin un NgModule.
Cómo crear un componente Standalone
Para generar un componente Standalone, usa el siguiente comando:
ng g c mi-componente --standalone
Esto crea un archivo mi-componente.component.ts con esta estructura:
import { Component } from '@angular/core';
@Component({
selector: 'app-mi-componente',
standalone: true, // Se define como standalone
templateUrl: './mi-componente.component.html',
styleUrls: ['./mi-componente.component.css']
})
export class MiComponenteComponent { }Cómo usar un Standalone Component
En un archivo principal como main.ts, puedes iniciar la aplicación sin un AppModule:
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent);
Si el AppComponent usa componentes Standalone, se deben importar directamente:
import { Component } from '@angular/core';
import { MiComponenteComponent } from './mi-componente/mi-componente.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [MiComponenteComponent], // Importar el componente directamente
template: '<app-mi-componente></app-mi-componente>'
})
export class AppComponent { }Ejemplos de uso
-
Aplicaciones ligeras sin
NgModules. - Carga eficiente en aplicaciones modulares.
- Creación de componentes reutilizables sin dependencias innecesarias.
Jorge García
Fullstack developer