5 - NgModule

Capaz que una de las grandes mejoras en las betas y RC, fue el manejo del NgModule ... Este es quien maneja los hilos de la aplicación, es quien lleva la batuta , basicamente es quien orquesta a nuestra aplicación en Angular.

NgModule es la unidad de compilación y distribución de los componentes y pipes de Angular. En muchas cosas es similar a los modulos de ES6, porque tenemos declaraciones, imports, y exports.

Para ello vamos a ver como esta compuesta y para que sirve cada uno de los datos que recibe:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule.forRoot(APPROUTER)
  ],
  providers: [myService],
  bootstrap: [InitComponent]
})

Esta declaración que vemos arriba es lo mas "comun" o inicial que podriamos ver...

NgModule es un decorador que se utiliza en app.module.ts @NgModule toma un objeto de metadatos que indica a Angular cómo compilar y ejecutar código de módulo.

Vamos a ir viendo paso a paso como funciona y que requiere cada función.

• Declarations: este arreglo sirve para incluir todos los Componentes que creamos a lo largo de nuestro desarrollo para poder utilizarlo, si no declaramos nuestro componente, no vamos a poder utilizarlo, ya sea por el router o por llamarlo como un tag especifico. Tambien vamos a declarar nuestras Directivas

• Imports: este arreglo va a tener "normalmente" lo que contiene *Module , lo que quiere decir es que normalmente todo lo que termina con Module va a estar ahi, normalmente son librerias y funcionalidades CORE, aca va a estar la composición de la funcionalidad que vamos a utilizar... Por ejemplo, RouterModule lo importamos para poder utilizar el router de Angular, y con el foorRoot le indicamos un tipo de objeto que tiene las rutas de cada uno de los componentes.

• Providers: aquí tendremos otro arreglo en el cual vamos a poner todos nuestros servicios, nuestros providers, todo lo que contenga "@Injectable", estos servicios se levantan en el momento que se crea la APP en el navegador y son singletons, esto quiere decir que se instancian en una porción de memoria y se mantienen ahi hasta que se termine la app.

• Bootstrap: Este arreglo va a tener nuestro componente inicial, nuestro "Init" por decirlo de alguna manera... donde vamos a tener el router por ejemplo... quien sea el contenedor inicial para nuestra aplicación.

El NgModule, cuando entro fue algo raro... antes estabamos acostumbrados a hacer otro tipo de cosas...

( Aquí esta el código del bootcamp que hicimos antes de que apareciera el NgModule https://github.com/jorgeucano/bootcamp )

Pero esto sirve para organizarnos un poco... realmente si no funciona los errores se entienden, y el NgModule ( y los IDE's y Editores de texto) ya saben que te falta y te lo marcan antes de que hagas nada.. te avisan =>

Entonces de esta forma vamos a estar mas "contenidos" a la hora de escribir nuestro codigo y sentir que podemos avanzar sin tener tantos problemas con el NgModule, digo esta claro el "error" que nos esta mostrando... Consider adding it to a NgModule declaration ... hace falta mas ???

Angular Modules help organize an application into cohesive blocks of functionality

"... ayudan a organizar una aplicación en bloques cohesivos de funcionalidad" .. esta claro, nos ayudan a ser cohesivos y funcionales...

Por lo tanto, este archivo lo vamos a tener abierto a lo largo de nuestro desarrollo ( algunas veces nos dara dolor de cabeza) pero sabemos que si este archivo no esta actualizado la app no funciona :-D ... primer punto para ver ...