Was ist ein NgModule?

Question

Accepted Answer

Ein **NgModule** ist eine mit `@NgModule` dekorierte Klasse, die verwandte Komponenten, Direktiven, Pipes und Dienste in einem kohärenten Block gruppiert und Angular mitteilt, wie diese kompiliert und miteinander verbunden werden. (Hinweis: modernes Angular bevorzugt zunehmend **eigenständige Komponenten** gegenüber NgModules, aber das Verständnis von NgModules ist für die meisten vorhandenen Codebasen noch notwendig.)

## Anatomie eines 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 {}
```

## Die vier wichtigsten 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
```

Eine Komponente kann nur in **einem** Modul deklariert werden und muss deklariert (oder als eigenständig importiert) sein, um in den Vorlagen dieses Moduls verwendbar zu sein.

## Das Root-Modul

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

Jede (nicht eigenständige) App hat ein Root-`AppModule` mit einem `bootstrap`-Array, das die Startkomponente benennt.

## Feature-Module und Organisation

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

Anwendungen werden in **Feature-Module** (eines pro Domänenbereich) und ein **Shared Module** (gemeinsame Komponenten/Pipes) organisiert, wodurch die Codebasis modular bleibt und Lazy Loading pro Feature ermöglicht wird.

## Der Wechsel zu eigenständigen Komponenten

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

Modernes Angular ermöglicht es Komponenten, **eigenständig** zu sein — ihre eigenen Abhängigkeiten direkt zu deklarieren — wodurch NgModule-Boilerplate reduziert oder eliminiert wird.

## Warum es wichtig ist

NgModules sind der traditionelle Organisations- und Abhängigkeits-Verdrahtungsmechanismus von Angular — das Verständnis von `declarations`/`imports`/`exports`/`providers` ist notwendig, um die übergroße Mehrheit der vorhandenen Angular-Apps zu navigieren und Lazy Loading zu verstehen.

Während neuer Code zu eigenständigen Komponenten tendiert, bleibt das Wissen über NgModules für echte Angular-Arbeit unverzichtbar.