Angluar CLI und die Macht der schematics

Angluar CLI bringt uns Schematics

Angular CLI eignet sich natürlich ideal um Angular Projekte zu erstellen, testen und zu starten. Allerdings hilft die CLI auch beim Erstellen einzelner Komponenten, dies ist vor allem möglich mit „ng generate“.
Dafür werden die sogenannten Schematics verwendet. Somit werden die Gerüste definiert, die zum erstellen von neuen Komponenten benötigt werden. Was eine schnellere Entwicklung ermöglicht, da man als Entwickler nicht immer den nötigen standard Code, Boilerplate Code, selbst schreiben muss.
Angular liefert hier auch ein Schematics für die wichtigsten Grundelemente mit wie:

 

• ng new <name>: generiert eine komplette Angular-Applikation mit Konfiguration, Tests und einer Demo Start Seite
• ng g component <name>: generiert ein Angular-Component, es werden dazu css, html, die Typescript und die Spec Datei erstellt
• ng g service <name>: generiert einen Angular-Service, es werden die Typescript und die Spec Datei erstellt
• ng g module <name>: generiert ein Angular-Module, es werden die Typescript und die Spec Datei erstellt
• ng g guard <name>: generiert eine Angular-Routeguard, es werden die Typescript und die Spec Datei erstellt
• ng g pipe <name>: geneiert eine Angular-Pipe, es werden die Typescript und die Spec Datei erstellt, die Pipe wird auch im Angular-Module registriert
• ng g directive <name>: generiert eine Angular-Directive, es werden die Typescript und die Spec Datei erstellt, die Directive wird auch im Angular-Module registriert
• ng g serviceWorker <name>: generiert einen ServiceWorker Datei „ngsw-config.json“ und nimmt die Konfiguration in der angular.json, package.json sowie die Registrierung im Angular-Module vor

 

Optionale Parameter erweitern die Möglichkeiten

Es gibt noch Möglichkeiten Konstrukte für Klassen, Interfaces und Enums zu erstellen.
Durch die gegebenen Möglichkeiten lassen sich also die wichtigsten Elemente einer Angular-Applikation mit einfachen Befehlen erstellen. Der Vorteil ist vor allem, dass diese Konstrukte auch der aktuellen Angular-Konvention entsprechen und den nötigen Boilerplate Code enthalten.

Durch den Befehl „ng g component –help“ können auch weitere Optionen angezeigt werden. Möglichkeiten sind zum Beispiel auch ein „–dryRun“, damit werden einem nur die Änderungen angezeigt, ohne diese auszuführen. Es sind aber auch Einstellungen möglich, wie zum Beispiel ein Inline-Template zu verwenden, das es sich um einen Einsprungspunkt handelt, ein Prefix oder ob die Komponente im Module auch als Export eingetragen werden soll.
Gänge Entwicklungsumgebungen, die auch über eine Angular Integration verfügen haben ebenso die Möglichkeit Angular-CLI Funktionen in der IDE zu verwenden.

Angular Material Schematics

Auch das von Angular entwickelte Angular-Material bringt seine eigenen Schematics mit, diese beinhalten einige Grundlegende Design Elemente aus dem Material Katalog.
Mit der Installation von Angular-Material werden die Schematics automatisch mitgeliefert.
„ng add @angular/material“

Wobei hier durch „ng add“ auch wieder Angular-Schematics verwendet werden um die Angular-Material Komponenten hinzuzufügen. In diesem Schritt werden die index.html, style.css, app.modules.ts, angular.json und package.json für die Verwendung angepasst.

Danach stehen neue Angular-Material Schematics zur Verfügung:

• ng generate @angular/material:nav: erstellt ein Grundgerüst mit einer seitlichen Navigation, die sich automatisch an die Größe des Displays anpasst.
• ng generate @angular/material:dashboard: erstellt ein Grundgerüst für eine Dashboard-Ansicht mit Material-Cards
• ng generate @angular/material:table: erstellt ein Grundgerüst einer Daten getriebenen Tabelle mit einer Dummy Datenquelle
• ng generate @angular/material:addressForm: erstellt ein Grundgerüst für eine Formularseite am Beispiel einer Lieferadresse

 

Mit den Schematics erstellten Material Komponenten, dienen zum einen als Grundgerüst, aber auch als Hilfestellung in Form einer Demo. So zeigen diese Elemente das Zusammenspiel zwischen Angular und Material, diese bieten natürlich jede Menge nützliche Tipps für eigene Komponenten. So lässt sich im oben gennannten Adress-Formular auch die Integration der Validierung veranschaulichen, genauso wie die Verwendung von Input-, Dropdown- oder Textfeldern.

Weitere Informationen finden Sie direkt auf der Angular Material Seite.

 

NgRx and Schematics

NgRx ist eine der besten Umsetzungen des Redux Patterns für Angular. Mit NgRx wird sehr nahe an Angular mit den Funktionen von Angular ein Redux Store mit vielen Funktionalitäten umgesetzt.
Hier wird viel Hilfe mit Schematics angeboten, sei es beim erstellen des Stores, Actions oder Effects, für alles gibt es die nötigen Schematics. Zur Installation werden folgende Grundlagen benötigt:

npm install @ngrx/schematics --save-dev
npm install @ngrx/{store,effects,entity,store-devtools} --save

Danach sind die Schematics für NgRx verfügbar und können verwendet werden:

ng generate @ngrx/schematics:store State --root --module app.module.ts
CREATE src/app/reducers/index.ts (359 bytes)
UPDATE src/app/app.module.ts (1821 bytes)

Wie man sieht kann also ein Root Reducer (Store) erstellt werden, mit dem Befehl werden auch die nötigen Änderungen im der Angular-Module vorgenommen.
Eine Auflistung aller Möglichkeiten findet man in den Docs auf Github.
https://github.com/ngrx/platform/tree/master/docs/schematics

 

Eigene/Custom Schematics

Es ist auch möglich eigene Schematics zu definieren, damit lässt sich also ein einheitliches Regelset zur Erstellung neuer Komponenten erstellen.

npm install -g @angular-devkit/schematics-cli

Nun können wir ein neues Projekt erstellen um eigene Schematics zu definieren.

schematics blank --name=v-component

Daraus resultiert eine collection.json:

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "v-component": {
      "description": "A blank schematic.",
      "factory": "./v-component/index#vComponent"
    }
  }
}

 

$schema definiert das Format, welches auch von der IDE verwendet wird um Hilfestellung zu leisten.
Unter dem Schlüssel „schematics“ wird eine Sammlung an Schematics definiert.
„v-component” ist die Schematic die wir in diesem Fall definieren.
Die „factory“ ist eine Referenz auf die in der Datei „v-component/index.js“ hinterlegte Methode, welche eine „RuleFactory“ ist.
In der Datei v-component\src\v-component\index.ts fügen wir den Teil „tree.create(‘v-component.ts’, ‘Willkommen bei virtual7’);“ hinzu.

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

export function vComponent(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create('v-component.ts', 'Willkommen bei virtual7');
    return tree;
  };
}

Danacha einmal den Build Prozess ausführen:

npm run build

Danach steht uns eine neue Schematic zur verfügung.

schematics .:v-component --dry-run=false

Und damit wird die Datei v-component.ts mit dem Inhalt „Willkommen bei virtual7’“ erstellt.
Schon haben wir unsere eigene Schematic geschrieben.

Es lassen sich mit einer Schematic auch mehrere Dateien anlegen oder verschiedene Schematics mit einander verknüpfen. Mögliche Template Dateien können für die Schematics zu hinterlegen werden, um größere und komplexere Klassen/Komponenten zu erzeugen.