Hva er en NgModule?

Question

Hva er en NgModule?

Accepted Answer

En **NgModule** er en klasse dekorert med `@NgModule` som grupperer relaterte komponenter, direktiver, pipes og tjenester i en sammenhengende blokk, og forteller Angular hvordan de skal kompileres og koblet sammen. (Merk: moderne Angular favoriserer i økende grad **standalone components** fremfor NgModules, men å forstå NgModules er fortsatt essensielt for de fleste eksisterende kodebaser.)

## Anatomi av 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 fire nøkkelarrayene

```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 bare deklareres i **ett** modul, og må deklareres (eller importeres som standalone) for å kunne brukes i det modulets maler.

## Rotmodulen

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

Hver (ikke-standalone) app har en rot `AppModule` med en `bootstrap` array som navngir startkomponenten.

## Feature modules og organisering

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

Apps er organisert i **feature modules** (en per domenområde) og en **shared module** (vanlige komponenter/pipes), noe som holder kodebsen modulær og gjør det mulig å lade features lat.

## Skiftet til standalone

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

Moderne Angular lar komponenter være **standalone** — deklarere sine egne avhengigheter direkte — redusere eller eliminere NgModule boilerplate.

## Hvorfor det betyr noe

NgModules er Angulars tradisjonelle organiserings- og avhengighetskoblingmekanisme — å forstå `declarations`/`imports`/`exports`/`providers` er nødvendig for å navigere det store flertallet av eksisterende Angular-apper og for å forstå lat lasting.

Selvom ny kode trender mot standalone components, forblir NgModule-kunnskap essensielt for Angular-arbeid i virkeligheten.