Saltar al contenido

Angular ¿qué son @ngModules y cómo usarlos?

junio 22, 2021

Modularizar nuestro código nos ayudará a que nuestra aplicación sea mucho más escalable a largo plazo, es un función importante y poderosa de Angular. Una habilidad muy apreciada por grandes empresas ya que permite mayor escalabilidad del proyecto.

Cuando creamos una aplicación web, en la mayoría de los casos vamos a necesitar tener diferentes secciones o módulos a las que podremos acceder, las cuales debería poder administrarse de forma completamente independientes. Por ejemplo, un sistema de eCommerce debe tener una sección de ventas, pero también una sección de usuarios.

No tiene sentido que si por alguna razón falla o se rompe la funcionalidad de registro de usuario, también falle el servicio que administra las ventas. Modular nuestra aplicación nos ayuda a mantener un orden más estricto dentro de nuestro código y a nivel de dependencias. Para esto nos sirven los módulos en Angular, aquí veremos como usarlos correctamente.

Saber modularizar nuestras aplicaciones en Angular, es una habilidad muy fácil de dominar y que es apreciada por las más grandes empresas en todo el mundo. Modularizar el código nos permite crear aplicaciones web mucho más escalables a lo largo del tiempo. Una vez que aprendes como hacerlo, trabajar de la forma tradicional con un solo módulo principal, te parece antiguo y desordenado.

Módulos en Angular ( @NgModule )

Para crear un módulo o una sección modular en Angular usamos la palabra reservada @NgModule como decorador antes de crear una clase que luego vamos a exportar y a importar dentro del módulo principal de la aplicación. Esto lo podemos hacer manualmente o podemos usar Angular Cli para hacer lo forma más rápida. Con el comando:

ng g module directorySection/name	

Con este comando se generará una carpeta que dentro contendrá un archivo .ts con el nombre del Modulo y la extensión Module en el nombre. Dentro de este archivo podrás ver la estructura básica de un Módulo en Angular. Como podrás ver, tiene 2 importaciones que vienen por defecto y crea una clase que tiene un decorador antes.

Módulos en Angular ( @NgModule )
(Ejemplo) contact y shared son capretas y dentro cada una tiene un archivo module.ts y sus componentes. Imagen de: https://rubensa.wordpress.com/

Al igual que cuando creamos un componente que tiene un decorador ( @Component ) antes de la creación de la clase, el Módulo tiene el decorador ( @ngModule ) que le dice a Angular que este archivo contiene un código que define un Módulo.

Podría interesarte: Correcto uso de COMPONENTES de software

Dentro de este nuevo módulo podemos hacer importaciones de componentes que vamos a usar dentro de la sección. Es más, si usamos Angular Cli para crear nuestros componentes y los creamos dentro del directorio de la sección donde está creado nuestro módulo, Angular los importará directamente en el módulo y no en el módulo principal. Esto nos ayuda a trabajar de forma más ordenada y no llenar de importaciones el módulo principal.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MycomponentComponent } from './micomponente/mycomponet.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    MycomponentComponent
  ]
})
export class nameModule { }

Las primeras 2 importaciones son las propias de cualquier módulo, la primera trae la funcionalidad y la segunda propiedades que son comunes en cualquier módulo que creemos en Angular. En este caso he agregado una importación de un componente que va a pertenecer a nuestra sección.

Importar nuestro módulo

Todas las importaciones que vayas a necesitar en esta sección de la aplicación puedes realizarlas dentro del directorio en el que creaste el módulo, así Angular sabrá que son parte de esa modulación. Cualquier servicio, dependencia, recurso, etc, lo agregas a ese módulo, luego solo debes recordar importar el módulo completo en el módulo principal de nuestra aplicación.

La importación del módulo debes hacerla en la sección de imports dentro del módulo principal. Es casi como instalar una funcionalidad en nuestra aplicación. Por ejemplo, cuando instalamos Firebase, debemos importar los módulos de Firebase dentro del módulo principal, lo mismo sucede con nuestros módulo creados dentro de la aplicación web por nosotros mismos.

Conclusiones

Cuando comenzamos a crear nuestra aplicación, tenemos que tener claro cuales serán las secciones y previamente crear un esquema de como se van a separar en módulos dentro al aplicación completa. Esto nos permitirá separar el trabajo y los equipos de desarrolladores en caso de que existan.

Modularizar nuestro código nos ayudará a que nuestra aplicación sea mucho más escalable a largo plazo, es un función importante y poderosa de Angular, que muchas veces no se enseña lo suficiente a pesar de ser tan sencilla. Personalmente creo que es lo primero que deberías ver en cualquier curso de Angular, ya que es una buena práctica solicitada y apreciada por empresas en todo el mundo.