Stellen Sie sich vor, Sie entwickeln eine App. Anfangs besteht sie nur aus einer einzigen Datei – wie main.ts. Doch im Verlauf fügen Sie immer mehr hinzu: Komponenten, Services, Styles, Logik, Datenverarbeitung, Authentifizierung und so weiter.

Früher oder später wird alles unübersichtlich – es ist schwer nachzuvollziehen, was wo verwendet wird oder wie alles zusammenhängt.

Genau dann wird Modularität zu Ihrem besten Freund.

Was ist ein Modul in Angular?

Ein Modul kann man sich wie eine Box vorstellen, in der alles zu einer bestimmten Funktionalität gesammelt wird. Beispielsweise könnten alle benutzerbezogenen Elemente in ein UserModule gelegt werden.

In Angular ist ein Modul einfach eine Klasse, die mit dem @NgModule-Dekorator versehen ist, wie hier:

Bedeutung der einzelnen Bereiche:

• declarations – listet die Komponenten, Direktiven und Pipes auf, die zu diesem Modul gehören;

• imports – importiert andere Module, von denen dieses Modul abhängt (zum Beispiel BrowserModule für den DOM-Zugriff);

• providers – deklariert Dienste (für Dependency Injection), die in diesem Modul verfügbar sind;

• bootstrap – definiert die Hauptkomponente, die beim Starten der Anwendung geladen wird (meistens AppComponent).

Im Wesentlichen legt ein Modul fest, welche Abhängigkeiten es benötigt, was es anderen Modulen zur Verfügung stellt und so weiter.

Alle Komponenten, die mit diesem Modul interagieren, können die bereitgestellten Dienste und Ressourcen nutzen.

Warum wir derzeit keine Module verwenden

Ab Angular 14 gibt es eine neue Alternative — Standalone-Komponenten.

Diese ermöglichen es, eine Komponente zu erstellen und zu verwenden, ohne sie überhaupt in ein Modul einzufügen. Wir haben sie tatsächlich bereits im gesamten Projekt verwendet, und sie sehen folgendermaßen aus:

Dies ist eine Standalone-Komponente — das bedeutet, sie muss nicht in den Deklarationen eines NgModule aufgeführt werden. Stattdessen werden alle benötigten Elemente (wie Direktiven, Pipes oder andere Module) direkt über die Imports-Eigenschaft innerhalb der Komponente eingebunden.

Dadurch wird die Projektstruktur schlanker und flexibler — besonders nützlich für kleine Anwendungen oder isolierte Funktionsblöcke.

Auch wenn neuere Angular-Projekte keine Module mehr benötigen, werden Sie ihnen dennoch häufig begegnen:

• Ältere Unternehmensanwendungen sind vollständig mit Modulen aufgebaut;

• Viele Tutorials, Dokumentationen und Beispiele sind weiterhin mit NgModule verfasst;

• Einige Drittanbieter-Bibliotheken und UI-Frameworks verwenden weiterhin den modulbasierten Ansatz.