Lesedauer 2 Minuten

Der Aufbau eines Angular-Projekts kann schnell unübersichtlich werden. Darum ist es nützlich, von Anfang an eine gute Struktur zu haben, wie zum Beispiel Components, Services oder Pipes sortiert zu logischen Einheiten zusammenzufassen.

Es gibt nicht die eine beste Angular-Projekt-Struktur. Skalierbarkeit ist zwar ein wichtiger Faktor bei dem Pattern, welches in den folgenden Abschnitten vorgestellt wird, doch es ist wichtig, wenn nötig, Anpassungen vorzunehmen.

Feature Module

Das Konzept von Feature-Modules ist bekannt, doch was genau es bedeutet, ist nicht immer klar. Ein Ansatz um Komponenten zu Feature-Modules zusammenzufassen ist, ein Feature als eine Webpage zu betrachten, zu welcher Nutzer:innen navigieren können.

Anders formuliert: Wenn this.router.navigate() aufgerufen wird, handelt es sich bei der Ziel-Komponente um ein neues Feature.

Die kleinste Einheit eines Features besteht demnach aus einem Modul und einer gleichnamigen Komponente.

MyFeature/
  - myFeature.module.ts
  - myFeature.component.ts
  - myFeature.component.html
  - myFeature.component.scss
  - XComponent/
    - x.component.ts
    - x.component.html
    - x.component.scss
  - YComponent/
    - y.component.ts
    - y.component.html
    - y.component.scss

Innerhalb des Modul-Ordners können anschließend sämtliche Komponenten angelegt werden, welche für das Feature relevant sind. myFeature.component fasst alles zusammen und dient als Ziel-Komponente für sämtliches Routing. Als letzter Schritt wird das FeatureModule in das AppModule importiert.

Durch die Abkapslung der einzelnen Features in eigene Module minimiert sich die Größe des AppModule. Dafür maximiert sich die Wartbarkeit und Modularität des Codes. Einzelne Features lassen sich einfach exkludieren oder über Methoden wie Lazy-Loading weiter verarbeiten.

Wichtig dabei ist, dass FeatureModule nichts exportieren. Referenzen zwischen den FeatureModules würde die Modularität negieren und damit den Vorteil ad absurdum führen. Wie man in diesem Fall mit Klassen (Komponenten, Services, Pipes, etc.) umgeht, welche über mehrere Features benötigt werden, erklärt der folgende Abschnitt.

Shared Module

Die Idee eines SharedModule ist, alle Komponenten, Pipes und Directives, welche über die Anwendung hinweg in mehreren FeatureModules verwendet werden, zu bündeln. Dabei kann es sich zum Beispiel um einen Button oder einen Info-Kasten handeln, der häufig verwendet wird.

SharedModule/
  - shared.module.ts
  - ButtonComponent/
    - button.component.ts
    - button.component.html
    - button.component.scss
  - url.pipe.ts
  - username.pipe.ts
  - accordion.directive.ts

Das erstellte SharedModule sammelt alle Komponenten, Pipes und Directives und gibt sie über export weiter. So kann jedes FeatureModule welches Komponenten des SharedModule verwenden möchte, es importieren.

Das SharedModule sollte keine Services enthalten, da diese bei jedem Import neue Instanz der Services erstellt und damit der Gedanke der Inversion of Control hinfällig wäre. Featureübergreifende Services werden in einem anderen Modul gebündelt, über welches im nächsten Abschnitt gesprochen wird.

Core Module

Ein CoreModule setzt das Prinzip um, dass bei dem Start der Anwendung Kern-Funktionalitäten geladen und für den Rest der Anwendung verfügbar gemacht werden.

CoreModule/
  - core.module.ts
  - authentication.service.ts
  - backend.service.ts
  - mailchimp.service.ts

Im CoreModule bündeln wir unsere Services und Module, welche über die gesamte Anwendung hinweg benötigt werden, aber nur ein Mal instanziiert werden dürfen. Ein Beispiel wäre zum Beispiel ein AuthenticationService oder auch das HttpClientModule.

Selbst implementierte Services sollten zwar im Ordner des CoreModul abgelegt werden, tauchen aber nicht bei den providers des Moduls auf, da sie automatisch von Angular im AppModule importiert werden. Für mehr Informationen zu diesem Thema, ist hier eine Erklärung zu finden. Das CoreModule wird letztlich in das AppModule importiert.

Fazit

In diesem Artikel wurde erklärt, wie sich ein Angular-Projekt mittels FeatureModules und den Shared- und Core-Module logisch aufteilen lässt. Wie schon zu Anfang des Artikels erwähnt, handelt es sich dabei nicht um den heiligen Gral der Projektstruktur. Es ist wichtig, das Prinzip hinter diesem Pattern auszuprobieren und zu verstehen, um eigene Anpassungen daran vorzunehmen.

Für weitere Informationen über die Verwendung des Shared- und Core-Moduls ist folgender Artikel zu empfehlen. Für Informationen zu Feature-Modules finden sich in der Angular-Dokumentation selbst nützliche Tipps.

Bildnachweis: Unsplash.