# 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 =>

![](https://167756767-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Let0ZR5xSJZSAiGTmN8%2F-Let0blAiUQricbAH7jA%2F-Let0cvCOYifkaAjOAHe%2FCaptura%20de%20pantalla%202017-02-09%20a%20las%2022.36.35.png?generation=1557882378159741\&alt=media)

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 ...


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jorgeucano.gitbook.io/entendiendo-angular/capitulo-5-ngmodules/capitulo-4-ngmodule.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.