Angular7 - Módulos

El módulo en Angular se refiere a un lugar donde puede agrupar los componentes, directivas, tuberías y servicios, que están relacionados con la aplicación.

En caso de que esté desarrollando un sitio web, el encabezado, el pie de página, la sección izquierda, central y derecha se convierten en parte de un módulo.

Para definir el módulo, podemos usar NgModule. Cuando crea un nuevo proyecto con el comando Angular –cli, el ngmodule se crea en elapp.module.ts archivo de forma predeterminada y tiene el siguiente aspecto:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

El NgModule debe importarse de la siguiente manera:

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

La estructura del ngmodule es la que se muestra a continuación:

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})

Empieza con @NgModule y contiene un objeto que tiene declaraciones, importaciones, proveedores y bootstrap.

Declaración

Es una matriz de componentes creados. Si se crea algún componente nuevo, primero se importará y la referencia se incluirá en las declaraciones como se muestra a continuación:

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

Importar

Es una serie de módulos necesarios para su uso en la aplicación. También puede ser utilizado por los componentes de la matriz de declaración. Por ejemplo, ahora mismo en @NgModule, vemos el módulo del navegador importado. En caso de que su aplicación necesite formularios, puede incluir el módulo con el siguiente código:

import { FormsModule } from '@angular/forms';

La importación en el @NgModule será como el siguiente -

imports: [ 
   BrowserModule, 
   FormsModule 
]

Proveedores

Esto incluirá los servicios creados.

Oreja

Esto incluye el componente principal de la aplicación para iniciar la ejecución.