© Visual_Generation/shutterstock.com
Angular-Architekturen mit Nx Generators automatisieren

Work smarter, not harder


Die neuen Nx Generators erlauben das Automatisieren monotoner Aufgaben. Sie sind an den vom CLI verwendeten Schematics angelehnt, kommen jedoch ohne unnötige Indirektionen aus und sind somit einfacher zu entwickeln.

Sowohl Angular-Einsteiger als auch -Experten wissen den CLI-Befehl ng generate zu schätzen. Er generiert wiederkehrende Strukturen, wie beispielsweise das Grundgerüst von Komponenten oder Modulen, und automatisiert auf diese Weise monotone Aufgaben. Hinter dieser Anweisung stehen sogenannte Schematics, frei übersetzt Baupläne. Zur Automatisierung eigener Aufgaben kann mittlerweile jeder auf das Schematics API zugreifen. Leider ist dieses API nicht immer intuitiv und sieht häufig gar nicht benötigte Indirektionen vor.

Genau diese Unwägbarkeiten löst nun Nx [1]. Die populäre CLI-Erweiterung, die u. a. die Entwicklung von Enterprise-Anwendungen erheblich vereinfacht und von ehemaligen Angular-Core-Team-Mitgliedern stammt, kommt seit einigen Monaten mit einer vereinfachten Schematics-Alternative. Sie nennen sich Generatoren (Generators) und sind auf den ersten Blick den Schematics sehr ähnlich.

In diesem Artikel gehe ich anhand eines Fallbeispiels auf dieses vereinfachte API ein. Den Quellcode findet man unter [2] und [3].

Workspace-Generatoren

Die einfachste Möglichkeit, die neuen Generator APIs auszuprobieren, sind sogenannte Workspace-Generatoren. Das sind Generatoren, die nicht via npm verteilt, sondern direkt in einem Nx Workspace (Monorepo) platziert werden. Bei Nx Workspaces handelt es sich technisch gesehen um Angular-CLI-Projekte mit zusätzlichen Möglichkeiten. Sie lassen sich mit npm init erzeugen:

npm init nx-workspace myworkspace

Die Ausführung dieser Anweisung nimmt ein wenig Zeit in Anspruch. Danach kann innerhalb des Workspace ein Generator erzeugt werden:

ng generate @nrwl/workspace:workspace-generator entity

Der hier betrachtete Generator mit dem Namen entity hat die Aufgabe, innerhalb einer Datenzugriffsbibliothek eine Entity samt Datenzugriffs-Service einzurichten. Das Beispiel ist bewusst so gewählt, dass es möglichst viele Konzepte von Generatoren enthält. Der erzeugte Generator befindet sich in der Datei tools\generators\entity\index.ts, die bereits ein wenig Beispielcode beinhaltet. Auch wenn wir diesen später durch unsere eigenen Codestrecken ersetzen werden, lohnt sich zum Kennenlernen von Generatoren ein Blick darauf. Der Generator selbst ist lediglich eine Funktion, die zwei Parameter entgegennimmt (Listing 1).

Listing 1

export default async function (host: Tree, schema: any) { await libraryGenerator(host, { name: schema.name }); await formatFiles(host); return () => { installPackagesTask(host); }; }

Der erste Parameter vom Typ Tree repräsentiert das Dateisystem, das der Generator ändert, indem er z. B. weitere Services einrichtet. Genau genommen handelt es sich hierbei lediglich um eine Staging-Umgebung: Die durchgeführten Änderungen schreibt der Generator erst am Ende, wenn alles funktioniert hat, auf die Platte. Das verhindert, dass ein Generator, der mitten in der Ausführung abstürzt, einen inkonsistenten Zustand hinterlässt.

Möchten wir nach dem Zurückschreiben auf die Platte weitere Befehle anstoßen, können wir sie innerhalb einer anonymen Funktion platzieren und diese Funktion zurückliefern. Ein Beispiel dafür ist der Aufruf von installPackagesTask, der ein npm install, yarn install etc. anstößt. Damit diese Anweisungen Sinn ergeben, muss der Generator zunächst die gewünschten Paketnamen in die package.json schreiben. Der zweite Parameter mit dem Namen schema ist ein Objekt...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang