NgModules

Um NgModule é uma classe marcada pelo decorator @NgModule. Este decorator aceita metadata que informa ao Angular como compilar templates de component e configurar injeção de dependência.

import {NgModule} from '@angular/core';@NgModule({  // Metadata goes here})export class CustomMenuModule { }

Um NgModule tem duas responsabilidades principais:

• Declarar components, directives e pipes que pertencem ao NgModule
• Adicionar providers ao injector para components, directives e pipes que importam o NgModule

Declarações

A propriedade declarations da metadata @NgModule declara os components, directives e pipes que pertencem ao NgModule.

@NgModule({  /* ... */  // CustomMenu and CustomMenuItem are components.  declarations: [CustomMenu, CustomMenuItem],})export class CustomMenuModule { }

No exemplo acima, os components CustomMenu e CustomMenuItem pertencem a CustomMenuModule.

A propriedade declarations também aceita arrays de components, directives e pipes. Esses arrays, por sua vez, também podem conter outros arrays.

const MENU_COMPONENTS = [CustomMenu, CustomMenuItem];const WIDGETS = [MENU_COMPONENTS, CustomSlider];@NgModule({  /* ... */  // This NgModule declares all of CustomMenu, CustomMenuItem,  // CustomSlider, and CustomCheckbox.  declarations: [WIDGETS, CustomCheckbox],})export class CustomMenuModule { }

Se o Angular descobrir quaisquer components, directives ou pipes declarados em mais de um NgModule, ele reporta um erro.

Quaisquer components, directives ou pipes devem ser explicitamente marcados como standalone: false para serem declarados em um NgModule.

@Component({  // Mark this component as `standalone: false` so that it can be declared in an NgModule.  standalone: false,  /* ... */})export class CustomMenu { /* ... */ }

imports

Components declarados em um NgModule podem depender de outros components, directives e pipes. Adicione essas dependências à propriedade imports da metadata @NgModule.

@NgModule({  /* ... */  // CustomMenu and CustomMenuItem depend on the PopupTrigger and SelectorIndicator components.  imports: [PopupTrigger, SelectionIndicator],  declarations: [CustomMenu, CustomMenuItem],})export class CustomMenuModule { }

O array imports aceita outros NgModules, assim como components, directives e pipes standalone.

exports

Um NgModule pode exportar seus components, directives e pipes declarados de forma que eles estejam disponíveis para outros components e NgModules.

@NgModule({ imports: [PopupTrigger, SelectionIndicator], declarations: [CustomMenu, CustomMenuItem], // Make CustomMenu and CustomMenuItem available to // components and NgModules that import CustomMenuModule. exports: [CustomMenu, CustomMenuItem],})export class CustomMenuModule { }

A propriedade exports não se limita a declarações, no entanto. Um NgModule também pode exportar quaisquer outros components, directives, pipes e NgModules que ele importa.

@NgModule({ imports: [PopupTrigger, SelectionIndicator], declarations: [CustomMenu, CustomMenuItem], // Also make PopupTrigger available to any component or NgModule that imports CustomMenuModule. exports: [CustomMenu, CustomMenuItem, PopupTrigger],})export class CustomMenuModule { }

Providers de NgModule

Um NgModule pode especificar providers para dependências injetadas. Esses providers estão disponíveis para:

• Qualquer component, directive ou pipe standalone que importa o NgModule, e
• As declarations e providers de qualquer outro NgModule que importa o NgModule.

@NgModule({  imports: [PopupTrigger, SelectionIndicator],  declarations: [CustomMenu, CustomMenuItem],  // Provide the OverlayManager service  providers: [OverlayManager],  /* ... */})export class CustomMenuModule { }@NgModule({  imports: [CustomMenuModule],  declarations: [UserProfile],  providers: [UserDataClient],})export class UserProfileModule { }

No exemplo acima:

• O CustomMenuModule fornece OverlayManager.
• Os components CustomMenu e CustomMenuItem podem injetar OverlayManager porque são declarados em CustomMenuModule.
• UserProfile pode injetar OverlayManager porque seu NgModule importa CustomMenuModule.
• UserDataClient pode injetar OverlayManager porque seu NgModule importa CustomMenuModule.

O padrão forRoot e forChild

Alguns NgModules definem um método estático forRoot que aceita alguma configuração e retorna um array de providers. O nome "forRoot" é uma convenção que indica que esses providers são destinados a serem adicionados exclusivamente à raiz da sua aplicação durante o bootstrap.

Quaisquer providers incluídos desta forma são carregados ansiosamente, aumentando o tamanho do bundle JavaScript do seu carregamento inicial da página.

bootstrapApplication(MyApplicationRoot, {  providers: [    CustomMenuModule.forRoot(/* some config */),  ],});

Similarmente, alguns NgModules podem definir um forChild estático que indica que os providers são destinados a serem adicionados a components dentro da hierarquia da sua aplicação.

@Component({  /* ... */  providers: [    CustomMenuModule.forChild(/* some config */),  ],})export class UserProfile { /* ... */ }

Inicializando uma aplicação

O decorator @NgModule aceita um array bootstrap opcional que pode conter um ou mais components.

Você pode usar o método bootstrapModule de platformBrowser ou platformServer para iniciar uma aplicação Angular. Quando executado, esta função localiza quaisquer elementos na página com um seletor CSS que corresponde ao(s) component(s) listado(s) e renderiza esses components na página.

import {platformBrowser} from '@angular/platform-browser';@NgModule({  bootstrap: [MyApplication],})export class MyApplicationModule { }platformBrowser().bootstrapModule(MyApplicationModule);

Components listados em bootstrap são automaticamente incluídos nas declarações do NgModule.

Quando você inicializa uma aplicação a partir de um NgModule, os providers coletados deste módulo e todos os providers de seus imports são carregados ansiosamente e disponíveis para injeção para toda a aplicação.