Hvad er et NgModule?

Question

Accepted Answer

Et **NgModule** er en klasse dekoreret med `@NgModule`, som grupperer relaterede komponenter, direktiver, pipes og tjenester i en samhængende blok og fortæller Angular, hvordan den skal kompileres og forbindes. (Bemærk: moderne Angular favoriserer i stigende grad **standalone-komponenter** over NgModules, men forståelse af NgModules er stadig vigtig for de fleste eksisterende kodebaser.)

## Anatomi af et 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 fire vigtigste arrays

```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 kun erklæres i **ét** modul og skal erklæres (eller importeres som standalone) for at være brugbar i det moduls skabeloner.

## Rod-modulet

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

Hver (ikke-standalone) app har et rod-`AppModule` med et `bootstrap`-array, der navngiver startkomponenten.

## Feature-moduler og organisation

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

Apps er organiseret i **feature-moduler** (én per domæneområde) og et **delt modul** (almindelige komponenter/pipes), hvilket holder kodebases modulær og muliggør lazy loading pr. feature.

## Skiftet til standalone

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

Moderne Angular lader komponenter være **standalone** — deklarerer deres egne afhængigheder direkte — reducerer eller eliminerer NgModule-boilerplate.

## Hvorfor det betyder noget

NgModules er Angulars traditionelle mekanisme for organisering og afhængigheds-forbinding — forståelse af `declarations`/`imports`/`exports`/`providers` er nødvendig for at navigere langt de fleste eksisterende Angular-apps og for at forstå lazy loading.

Medens ny kode tenderer mod standalone-komponenter, forbliver NgModule-viden vigtig for rigtig Angular-arbejde.