Diferencias entre NgModules y componentes independientes
Angular, un poderoso y popular framework de JavaScript, es conocido por su modularidad y arquitectura basada en componentes. En este blog exploraremos las diferencias entre NgModules y los componentes independientes, para entender cuándo utilizar cada uno y cómo se complementan.
¿Qué son los NgModules?
En Angular, un @NgModule
es un decorador que representa un bloque de código enfocado en una funcionalidad o característica específica. Actúa como contenedor de componentes, directivas, servicios y otros elementos, organizando claramente el código de la aplicación. Los módulos también pueden cargarse de forma diferida para mejorar el rendimiento de la aplicación.

Lista de metadatos de @NgModule
:
- Declarations: componentes, directivas y pipes.
- Imports: otros módulos necesarios.
- Exports: declaraciones reutilizables en otros NgModules.
- Providers: servicios globales.
- Bootstrap: el componente raíz de la aplicación.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { HostDirective } from './host.directive';
import { customPipe } from './custom.pipe';
import { AppService } from './shared/some.service';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [HomeComponent, HostDirective, customPipe],
imports:[AppRoutingModule, CommonModule],
providers: [AppService],
bootstrap: [AppComponent]
})
export class AppModule {}
En general, los NgModules administran múltiples elementos, aumentando el tamaño de la aplicación y disminuyendo el rendimiento. Además, los componentes declarados son de ámbito local, mientras que los servicios tienden a ser globales.
¿Qué es un Componente Independiente? 🌌
Los componentes independientes, introducidos en Angular 14, ofrecen una manera simplificada de construir aplicaciones. Permiten desarrollar componentes sin depender de NgModules, lo que hace que el desarrollo sea más modular y organizado.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-login',
standalone: true,
imports: [CommonModule],
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
constructor() { }
ngOnInit(): void {
}
}
Para convertir un componente en independiente:
- Establecer
standalone: true
. - Eliminarlo de las declaraciones del módulo.
- Usar
imports
para agregar dependencias.
Los componentes independientes son más ligeros y flexibles que los NgModules, ya que no requieren de un NgModule para ser usados, y pueden cargarse más rápido.
Diferencias Clave entre NgModules y Componentes Independientes 🎌
- NgModules organizan y administran dependencias, agrupando componentes, directivas y pipes relacionados.
- Componentes independientes son más flexibles y reutilizables sin necesidad de un NgModule. Son más ligeros y rápidos de cargar en comparación con los NgModules.
En resumen, los componentes independientes son una forma más flexible y ligera de construir aplicaciones Angular.
Estructura del Código 📝
- Con NgModules: Al usar
@NgModules
, la aplicación se inicia haciendo bootstrap delAppModule
en el archivomain.ts
y se agrega elAppRoutingModule
enAppModule
para configurar el enrutamiento.- Este enfoque incrementa el tamaño del paquete, haciendo que la app cargue más lento.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular app';
}
- Con Componentes Independientes: Con un enfoque independiente, se puede hacer bootstrap directamente del
AppComponent
enmain.ts
, y las rutas se añaden medianteprovideRoutes()
, reduciendo significativamente el tamaño del bundle y el código.
import { Component } from '@angular/core';
import { NgIf } from '@angular/common';
@Component({
selector: 'my-app',
standalone:true,
imports:[NgIf]
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular app';
}
Guards e Interceptores 🛡️
- Guards: En
@NgModules
, los guards siguen una arquitectura basada en clases y requieren más código. Desde Angular 14.2 se introdujeron los guards funcionales, más modernos y fáciles de combinar. El guardCanMatch
es una excelente alternativa aCanActivate
yCanLoad
. - Interceptors: Los interceptores basados en clases implementan la interfaz
HttpInterceptor
y se registran en el módulo. Los interceptores funcionales, por otro lado, ofrecen un enfoque más declarativo, permitiendo tareas específicas en solicitudes y respuestas.
Rendering del Lado del Servidor (SSR) 🚀
Angular ha mejorado el SSR desde la versión 4 con Angular Universal. En Angular 16, se introdujo la «hidratación de cliente», un proceso que reutiliza el DOM del servidor en el cliente, mejorando el rendimiento, la experiencia de usuario y el SEO.
- Versiones 13 a 16: Hasta Angular 15, el SSR se importaba a través del
AppModule
. En la versión 16, el métodoprovideServerRendering()
permite habilitar el SSR, yprovideClientHydration()
permite habilitar la hidratación de cliente para optimizar el rendimiento reutilizando el DOM.
Conclusión
Angular ha evolucionado con nuevas características y mejoras que facilitan la creación de aplicaciones web poderosas y eficientes.
Si quieres más información sobre los nuevos componentes independientes, echa un vistazo a este blog: Angular University
Si tienes una idea y necesitas ayuda a llevarla a cabo, contacta con nosotros: Sedix