Angular 2
Módulos

Introducción

Un modulo simple

Un módulo es una clase con el decorador @NgModule . Para crear un módulo agregamos @NgModule pasando algunos parámetros:

• bootstrap : El componente que será la raíz de su aplicación. Esta configuración solo está presente en su módulo raíz
• declarations : Recursos que el módulo declara. Cuando agrega un nuevo componente, debe actualizar las declaraciones ( ng generate component hace automáticamente)
• exports : recursos que el módulo exporta que se pueden usar en otros módulos.
• imports : recursos que el módulo utiliza de otros módulos (solo se aceptan clases de módulos)
• providers : Recursos que pueden inyectarse (di) en un componente.

Un ejemplo simple:

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
@NgModule({
  bootstrap: [AppComponent]
  declarations: [AppComponent],
  exports: [],
  imports: [BrowserModule],
  providers: [],
})
export class AppModule { }

Módulos de anidamiento

Los módulos pueden ser anidadas mediante el uso de la imports parámetro de @NgModule decorador.

Podemos crear un core.module en nuestra aplicación que contendrá cosas genéricas, como un ReservePipe (una tubería que invierte una cadena) y agruparlas en este módulo:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReversePipe } from '../reverse.pipe';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [ReversePipe], // export things to be imported in another module
  declarations: [ReversePipe],
})
export class CoreModule { }

Luego en el app.module :

import { CoreModule } from 'app/core/core.module';

@NgModule({
  declarations: [...], // ReversePipe is available without declaring here
                       // because CoreModule exports it
  imports: [
    CoreModule,        // import things from CoreModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }