Como crear un módulo en Angular 5, 4 y 2

Publicado en Jul 15, 2017

Hoy aprenderemos a crear un módulo en Angular 4, vamos a ver de manera muy práctica la creación de módulos en las nuevas versiones de AngularJS ¡vamos allá!

Para crear un módulo lo primero que debemos hacer es ir al directorio app de nuestro proyecto y dentro crear un directorio con el nombre del módulo que queremos crear. En mi caso voy a crear un módulo llamado clientes, así que voy a crear una carpeta llamada clientes.

Dentro de la carpeta del módulo en Angular 4 que estamos creando, voy a crear un par de componentes para hacer pruebas.

El primer componente:

import { Component } from '@angular/core';

@Component({
  selector: 'hola',
  template: `<h1>HOLA HOLA HLA</h1>`,
})
export class HolaComponent  { name = 'Modulo Clientes'; }

El segundo componente:

// components/listado.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'listado',
  template: `<h1>Este es el componente del listado de clientes - {{name}}</h1> <hola></hola>`,
})
export class ListadoComponent  { name = 'Modulo Clientes'; }

Dentro de esta carpeta del módulo voy a crear un fichero llamado clientes.module.ts

// clientes.module.ts

// Imports necesarios para crear módulos
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

//Importo los componentes
import { ListadoComponent } from './components/listado.component';
import { HolaComponent } from './components/hola.component';

// Metadatos del módulo
@NgModule({
    declarations: [ListadoComponent, HolaComponent],
    imports: [CommonModule],
    exports: [ListadoComponent]
})
export class ClientesModule { }

Ahora el paso clave es importar el nuevo módulo que hemos creado en el módulo principal app.module.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// Importamos el nuevo modulo
import { ClientesModule } from './clientes/clientes.module';

import { AppComponent }  from './app.component';

// Cargamos el nuevo modulo en el array de imports
@NgModule({
  imports:      [ BrowserModule, ClientesModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Ahora en cualquier componente del módulo principal podria cargar un componente del módulo en Angular que hemos creado.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1> <hr/> <listado></listado>`,
})
export class AppComponent  { name = 'Angular'; }

Y de esta manera podemos modularizar nuestra aplicación de Angular 4 y hacer módulos independientes unos de otros.

Con esto ya sabemos crear un nuevo módulo en Angular 4 🙂