Como crear un módulo en Angular 4 y 2

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 🙂

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

3 Comentarios

  1. Excelente muchas gracias Victor:
    en el clientes.module.ts

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

    ¿por que en el exports solo esta ListadoComponent ? ¿HolaComponent no es necesario declararlo tambien?

    Responder
    • Porque ese componente es el único que podré usar fuera del módulo 🙂

      Responder
  2. otra cosa: me he tomado tu curso de angular 4 en Udemy y es la mejor inversión que he hecho este mes! que buen curso. Recomendado.

    Responder

Poner un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *