Ce este un NgModule?

Question

Accepted Answer

Un **NgModule** este o clasă decorată cu `@NgModule` care grupează componente, directive, pipes și servicii conexe într-un bloc coeziv, spunând Angular cum să le compileze și să le conecteze împreună. (Notă: Angular modern favorizează din ce în ce mai mult **componentele standalone** în detrimentul NgModules, dar înțelegerea NgModules este încă esențială pentru majoritatea codebazelor existente.)

## Anatomia unui 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 {}
```

## Cele patru array-uri principale

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

O componentă poate fi declarată doar într-**un** modul și trebuie să fie declarată (sau importată ca standalone) pentru a fi utilizabilă în șabloanele acelui modul.

## Modulul rădăcină

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

Fiecare aplicație (non-standalone) are un `AppModule` rădăcină cu un array `bootstrap` care numește componenta de start.

## Module de caracteristici și organizare

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

Aplicațiile sunt organizate în **module de caracteristici** (unul per domeniu) și un **modul partajat** (componente/pipes comune), ținând codebase-ul modular și permițând încărcarea pigră per caracteristică.

## Trecerea la standalone

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

Angular modern permite componentelor să fie **standalone** — declarând propriile dependențe direct — reducând sau eliminând boilerplate-ul NgModule.

## De ce contează

NgModules sunt mecanismul tradițional de organizare și conectare a dependențelor Angular — înțelegerea `declarations`/`imports`/`exports`/`providers` este necesară pentru a naviga prin marea majoritate a aplicațiilor Angular existente și pentru a înțelege încărcarea pigră.

Alși noul cod tinde spre componente standalone, cunoștințele despre NgModule rămân esențiale pentru munca practică cu Angular.