Vad är NgModule?

Question

Vad är NgModule?

Accepted Answer

En **NgModule** är en klass dekorerad med `@NgModule` som grupperar relaterade komponenter, direktiv, pipes och tjänster i ett sammanhängande block, och talar om för Angular hur det ska kompilera och koppla ihop dem. (Obs: modern Angular föredrar alltmer **standalone components** framför NgModules, men förståelse för NgModules är fortfarande väsentlig för de flesta befintliga kodbasar.)

## Anatomi för en 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 {}
```

## De fyra nyckelmatriser

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

En komponent kan endast deklareras i **en** modul och måste deklareras (eller importeras som standalone) för att kunna användas i den modulens mallar.

## Rotmodulen

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

Varje (icke-standalone) app har en rot `AppModule` med en `bootstrap`-matris som namnger startkomponenten.

## Funktionsmoduler och organisation

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

Appar är organiserade i **funktionsmoduler** (en per domänområde) och en **delad modul** (vanliga komponenter/pipes), vilket håller kodbasen modulär och möjliggör lazy loading per funktion.

## Övergången till standalone

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

Modern Angular låter komponenter vara **standalone** — deklarerar sina egna beroenden direkt — vilket minskar eller eliminerar NgModule-boilerplate.

## Varför det är viktigt

NgModules är den traditionella mekanismen för organisering och koppling av beroenden i Angular — att förstå `declarations`/`imports`/`exports`/`providers` är nödvändigt för att navigera i den stora majoriteten av befintliga Angular-appar och för att förstå lazy loading.

Alltså även om ny kod tenderar mot standalone-komponenter, är NgModule-kunskap fortfarande väsentlig för verklig Angular-arbete.