angular/aio/content/guide/bootstrapping.md

Lanzando tu aplicación con un módulo raíz

Pre-requisitos

Una comprensión básica de lo siguiente:

• JavaScript Modules vs. NgModules.

---

Un NgModule describe cómo encajan las partes de la aplicación. Cada aplicación tiene al menos un módulo Angular, el módulo root, que debe estar presente para arrancar la aplicación en el lanzamiento inicial. Por convención y por defecto, este NgModule se llama AppModule.

Cuando se usa el comando de Angular CLI ng new para generar una aplicación, el AppModule predeterminado es el siguiente.

/* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

/* the AppModule class with the @NgModule decorator */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Después de las declaraciones de importación hay una clase con decorador @NgModule.

El decorador @NgModule identifica AppModule como una clase NgModule. @NgModule toma un objeto de metadatos que le dice a Angular cómo compilar e iniciar la aplicación.

• declarations— el único componente de esta aplicación..
• imports— importar BrowserModule para tener servicios específicos del navegador como renderizado DOM, sanitization y ubicación.
• providers— los proveedores de servicios.
• bootstrap— el componente raíz que Angular crea e inserta en la página web de host index.html.

La aplicación predeterminada creada por Angular CLI solo tiene un componente, AppComponent, por lo que está en los arrays de declarations y bootstrap.

{@a the-declarations-array} {@a declarations}

El array declarations

El array de declarations le dice a Angular qué componentes pertenecen a ese módulo. A medida que crees más componentes, agrégalos a las declarations.

Debe declarar cada componente en exactamente una clase NgModule. Si se usa un componente sin declararlo, Angular devuelve un mensaje de error.

El array declarations solo acepta declarables. Declarables pueden ser componentes, directivas y pipes. Todos los declarables de un módulo deben estar en el array de declarations. Los declarables deben pertenecer exactamente a un módulo. El compilador emite un error si se intenta declarar la misma clase en más de un módulo.

Estas clases declaradas son visibles dentro del módulo pero invisibles a componentes en un módulo diferente, a menos que se exporten desde éste módulo y el otro módulo importe éste mismo módulo.

A continuación, se muestra un ejemplo de un array declarations:

  declarations: [
    YourComponent,
    YourPipe,
    YourDirective
  ],

Un declarable solo puede pertenecer a un módulo, por lo que solo debe ser declarado en un @NgModule. Cuando se necesite en otro lugar, importa el módulo que tiene el declarable que necesites.

Solo las referencias de @NgModule van en el array imports.

Usando directivas con @NgModule

Usa el array declarations para las directivas. Para usar una directiva, un componente o un pipe en un módulo, hay que hacer algunas cosas:

1. Exportarlo desde el archivo donde se escribió.
2. Importarlo al módulo apropiado.
3. Declararlo en el array declarations del @NgModule.

Esos tres pasos se parecen a los siguientes. En el archivo donde se crea la directiva, expórtalo. El siguiente ejemplo, llamado ItemDirective es la estructura de directiva predeterminada que la CLI genera en su propio archivo, item.directive.ts:

El punto clave aquí es que se debe exportar para poder importarlo en otro lugar. A continuación, importar en el NgModule, en este ejemplo, app.module.ts con una declaración de importación de JavaScript:

Y en el mismo archivo, agregarlo al array declarations del @ NgModule:

Ahora puedes usar tu ItemDirective en un componente. Este ejemplo usa AppModule, pero se haría de la misma manera para un módulo de funciones. Para obtener más información sobre las directivas, consulta Directivas de atributos y Directivas estructurales. También se usaría la misma técnica para pipes y componentes.

Recuerda, los componentes, directivas y pipes pertenecen a un solo módulo. Solo se necesita declararlos una vez en tu aplicación porque se comparten importando los módulos necesarios. Esto ahorra tiempo y ayuda a mantener la aplicación optimizada.

{@a imports}

El array de imports

El array de imports del módulo aparece exclusivamente en el objeto de metadatos del @NgModule. Le dice a Angular sobre otros NgModules que este módulo en particular necesita para funcionar correctamente.

Esta lista de módulos son los que exportan componentes, directivas o pipes que las plantillas de componentes en este módulo hacen referencia. En este caso, el componente es AppComponent, que hace referencia a componentes, directivas o pipes en BrowserModule, FormsModule, o HttpClientModule. Una plantilla de componente puede hacer referencia a otro componente, directiva, o pipe cuando la clase referenciada se declara en este módulo o la clase se importó de otro módulo.

{@a bootstrap-array}

El array providers

El array providers es donde se enumeran los servicios que necesita la aplicación. Cuando enumera los servicios, están disponibles en toda la aplicación. Puedes reducir el scope al usar módulos de funciones y carga diferida. Para más información, ver Proveedores.

El array bootstrap

La aplicación se inicia haciendo bootstraping desde la raíz AppModule, que es también conocido como entryComponent. Entre otras cosas, el proceso de carga crea los componentes enumerados en el array de bootstrap e inserta cada uno en el DOM del navegador.

Cada componente bootstrap es la base de su propio árbol de componentes. La inserción de un componente bootstrapped generalmente desencadena una cascada de creaciones de componentes que completan ese árbol.

Si bien puedes colocar más de un árbol de componentes en una página web de host, la mayoría de las aplicaciones tienen solo un árbol de componentes y arrancan un solo componente raíz.

Este componente raíz se suele llamar AppComponent y se encuentra en el array bootstrap del módulo raíz.

Más sobre módulos Angular

Para obtener más información sobre NgModules que probablemente veas con frecuencia en las aplicaciones, consulta Módulos de uso frecuente.