O que é um NgModule?

Question

IT Interview Practice · Accepted Answer

Um **NgModule** é uma classe decorada com `@NgModule` que agrupa componentes, diretivas, pipes e serviços relacionados em um bloco coeso, informando ao Angular como compilá-los e conectá-los. (Nota: o Angular moderno favorece cada vez mais **componentes standalone** em relação aos NgModules, mas entender NgModules ainda é essencial para a maioria das bases de código existentes.)

## Anatomia de um NgModule

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // components/directives/pipes THIS module owns
  imports: [CommonModule, FormsModule],                 // other modules whose exports we need
  exports: [UserListComponent],                          // what we make available to importers
  providers: [UserService],                              // services (DI) provided by this module
})
export class UsersModule {}
```

## Os quatro arrays principais

```text
declarations → components, directives, and pipes that BELONG to this module
imports      → other NgModules whose exported features this module needs
exports      → the subset of declarations/modules made available to importers
providers    → services registered for dependency injection
```

Um componente só pode ser declarado em **um** módulo e deve ser declarado (ou importado como standalone) para ser utilizável nos templates desse módulo.

## O módulo raiz

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // the root component to launch
})
export class AppModule {}
```

Todo aplicativo (não-standalone) tem um `AppModule` raiz com um array `bootstrap` nomeando o componente inicial.

## Módulos de recursos e organização

```text
AppModule (root) → imports → UsersModule, AdminModule, SharedModule
```

Os aplicativos são organizados em **módulos de recursos** (um por área de domínio) e um **módulo compartilhado** (componentes/pipes comuns), mantendo a base de código modular e permitindo carregamento lazy por recurso.

## A mudança para standalone

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // no NgModule needed
```

O Angular moderno permite que componentes sejam **standalone** — declarando suas próprias dependências diretamente — reduzindo ou eliminando boilerplate NgModule.

## Por que isso importa

NgModules são o mecanismo tradicional de organização e fiação de dependência do Angular — entender `declarations`/`imports`/`exports`/`providers` é necessário para navegar pela grande maioria dos aplicativos Angular existentes e para entender carregamento lazy.

Embora o novo código tenda para componentes standalone, o conhecimento de NgModule permanece essencial para o trabalho prático com Angular.

Anatomia de um NgModule

Os quatro arrays principais

O módulo raiz

Módulos de recursos e organização

A mudança para standalone

Por que isso importa

Perguntas relacionadas