Angular 6 - Módulos

Module em Angular refere-se a um local onde você pode agrupar os componentes, diretivas, canais e serviços, que estão relacionados ao aplicativo.

No caso de você estar desenvolvendo um site, o cabeçalho, rodapé, esquerda, centro e seção direita passam a fazer parte de um módulo.

Para definir o módulo, podemos usar o NgModule. Quando você cria um novo projeto usando o comando Angular -cli, o ngmodule é criado no arquivo app.module.ts por padrão e tem a seguinte aparência -

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

O NgModule precisa ser importado da seguinte forma -

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

A estrutura do ngmodule é mostrada abaixo -

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

Começa com @NgModule e contém um objeto que possui declarações, import s, provedores e bootstrap.

Declaração

É uma série de componentes criados. Se algum novo componente for criado, ele será importado primeiro e a referência será incluída nas declarações conforme mostrado abaixo -

declarations: [
   AppComponent,
   NewCmpComponent
]

Importar

É um conjunto de módulos necessários para uso no aplicativo. Ele também pode ser usado pelos componentes na matriz de declaração. Por exemplo, agora no @NgModule vemos o Módulo do navegador importado. Caso seu aplicativo necessite de formulários, você pode incluir o módulo da seguinte forma -

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

A importação no @NgModule será como o seguinte -

imports: [
   BrowserModule,
   FormsModule
]

Provedores

Isso incluirá os serviços criados.

Bootstrap

Isso inclui o componente principal do aplicativo para iniciar a execução.