X'inhu NgModule?

Question

X'inhu NgModule?

Accepted Answer

An **NgModule** hu klassi dekoratt mal `@NgModule` li tigruppja komponenti relati, direttivi, pipes, u servizzi f'blokk koesiv, u tgħid lil Angular kif tikkompila u twieldhom flimkien. (Nota: Angular modern aktar u aktar jiffavorixxi **standalone components** fuq NgModules, iżda l-għarif ta' NgModules xorta hu essenzjali għall-biċċa tal-codebases eżistenti.)

## L-Anatomija ta' 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 {}
```

## Il-erbgħa arrays ewlenin

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

Komponent tista' tiġi ddikjarata f'**modulu wieħed** biss, u trid tiġi ddikjarata (jew importata bħala standalone) biex tkun użabbli fit-templates tal-modulu ta' dik il-komponent.

## Il-modulu root

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

Kull app (li mhix standalone) għanda `AppModule` root b'array `bootstrap` li jsemmun il-komponent tal-bidu.

## Feature modules u organizzazzjoni

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

L-apps huma organizzati f'**feature modules** (wieħed għal kull żona ta' domanju) u **shared module** (komponenti/pipes komuni), li jżommu l-codebase modulari u jippermettu lazy loading għal kull feature.

## Il-bidla lejn standalone

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

Angular modern jippermetti li komponenti jkunu **standalone** — jiddikjaraw id-dipendenzi tagħhom direttament — u jitqalllu jew jeleminawhom il-boilerplate ta' NgModule.

## Għaliex hu importanti

NgModules huma l-mekkaniżmu tradizzjonali ta' organizzazzjoni u wiring ta' dipendenzi ta' Angular — il-għarif ta' `declarations`/`imports`/`exports`/`providers` hu neċessarju biex tippassa fuq l-maġġoranza tal-apps ta' Angular eżistenti u biex tifhem lazy loading.

Billi l-kodiċi ġdid jimdil lejn standalone components, l-għarif ta' NgModule xorta hu essenzjali għall-Angular work reali.