Stellen Sie sich vor, Sie entwickeln eine App. Anfangs besteht sie nur aus einer einzigen Datei – wie main.ts. Doch im Laufe der Zeit 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?

Stellen Sie sich ein Modul als eine Box vor, in der Sie alles aufbewahren, was zu einer bestimmten Funktion gehört. Zum Beispiel 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 folgt:

Die einzelnen Teile haben folgende Aufgaben:

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

• imports – importiert andere Module, von denen dieses Modul abhängt (wie 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 Start der Anwendung geladen wird (in der Regel AppComponent).

Im Wesentlichen definiert ein Modul, 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

Seit 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 so aus:

Dies ist eine Standalone-Komponente — das bedeutet, sie muss nicht in einer NgModule-Deklaration 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 dennoch häufig auf sie stoßen:

• Ältere Unternehmensanwendungen wurden vollständig mit Modulen entwickelt;

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

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