Wie schon in unserem Artikel: Angluar CLI und die Macht der schematics erklärt leifert uns Angular mit der CLI und den Schematics sehr viel zur schnellen Erstellung von Boilerplate Komponenten. Die Möglichkeiten und Hilfe die uns Angular CLI beim Entwickeln zur Hand gibt hören hier nicht auf.

Schon alleine mit “ng serve” bietet sich uns ein kompletter Entwicklungs-Server der viele Möglichkeiten mit sich bringt. Angular CLI erstellt uns ein Projekt, welches schon so konfiguriert ist, dass wir Tests laufen lassen können und verschieden Umgebungen für Entwicklung und Produktion haben.

Angular hat mit seiner CLI ein Tool, welches uns viel Arbeit abnimmt aber auch den kompletten Build Prozess begleitet. In diesem Artikel geben ich einen keinen Einblick, verlinke aber auch für die einzelnen Befehle auf die Angular Dokumentation.

Die wichtigsten Befehle der Angular CLI

 

ng new

Um ein neues Projekt zu starten bietet uns Angular CLI mit “ng new” alles an, was wir dafür brauchen. Als Parameter geben wir hier nur den Namen des neuen Projektes an, dieser dient auch als Name für das Verzeichnis, welches angelegt wird und in dem danach der von der CLI erstellte Code liegt.

Wie bei den meisten CLI Befehlen, gibt es auch verschiedene Optionen, welche wir übergeben können. Einige der Wichtigsten will ich hier erklären.

Alle Optionen finden sie in der Angular Dokumentation

ng generate

Wie in unserem Artikel zu den Schematics genauer beschrieben, dient “ng generate” dazu mit der Angular CLI Komponenten und Elemente zu generieren.
Der hierzu notwendige Boiler Plate Code wird dadurch automatisch erzeugt.

Alle Optionen finden sie in der Angular Dokumentation

 

Options:

Für “ng new” und “ng generate” bietet die Angular CLI uns fast identische zusätzliche Optionen an. Eine Übersicht der wichtigsten Optionen der beiden Befehle finden Sie hier:

• –dry-run (alias: -d) Fürt einen Durchlauf aus, der anzeigt was passieren würde. Es werden allerdings keine Dateien angelegt oder Änderungen durchgeführt.
• –force (alias: -f) Überschreibt alle vorhandenen Dateien.
• –verbose (alias: -v) Erhöht die Informationen die im Log angezeigt werden.
• –inline-style (alias: -s) Normalerweise werden zusätzlich CSS Dateien angelegt, mit dieser Option wird das CSS in der .ts Datei definiert.
• –inline-template (alias: -t) Normalerweise werden zusätzlich HTML Dateien angelegt, mit dieser Option wird das HTML in der .ts Datei definiert.
• –routing Erstellt ein Routing Module mit dem neuen Projekt
• –prefix (alias: -p) Definiert den Prefix für die verwendeten Selektoren der Components
• –style Definiert die Datei Endung der Style Dateien.
• –skip-tests (alias: -S) Erstellt keine Tests

ng add

Dieser Befehl fügt eine npm Library hinzu und verankert sie in unserem Projekt.
Sollte es sich um eine Angular Library handeln sind meistens auch Schritte hinterlegt, die zur fertigen Einbindung in die Angular Applikation automatisch vorgenommen werden.

Gute Beispiele sind hier Angular Material und Angular PWA

Alle Optionen finden sie in der Angular Dokumentation

 

ng lint

In der tslint.json können die Regeln für Codeformatierung hinterlegt werden. Der Befehl startet eine TSLint Analyse zur Lesbarkeit, zu funktionalen Fehler und wie managebar der Code ist.

Es ist sinnvoll TSLint auch in den Build Prozess einzubinden, da es die Qualität des Codes dauerhaft sicherstellt.

Mehr Infos zu TSLint auf der Github Seite von TSLint

Alle Optionen finden sie in der Angular Dokumentation

 

ng test

Nutzt die in der angular.json und in Karma hinterlegten Konfiguration Parameter um die Tests (Specs) auszuführen.

Mehr Infos zu Karma auf der Github Seite vom Karma-Runner

Alle Optionen finden sie in der Angular Dokumentation

 

ng e2e

Nutzt die in der angular.json und in Protector hinterlegten Konfiguration Parameter um Ende zu Ende Tests auszuführen.

Weitere Infromationen zu Protector

Alle Optionen finden sie in der Angular Dokumentation

 

ng update

Eine der neueren Befehle ist „ng update“, er wurde eingeführt um Apps und ihre Abhängigkeiten auf den neusten Stand zu bringen. Hierbei werden auch Skripte zur Migration ausgeführt.

Alle Optionen finden sie in der Angular Dokumentation

 

ng serve

Der wohl wichtigste Befehl für die Entwicklung ist „ng serve“. Mit der Hilfe des webpack dev-server wird hier die Anwendung lokal gestartet. Dies wird im Standard Fall mit einem Watch auf die Dateien der Applikation gestartet und lädt neue Änderung auch sofort nach.

Der Vorteil ist hier durch den Watch das Angular CLI auch automatisch nach dem Speichern der Dateien dem Browser den Befehl zum neu laden der Seite sendet.

Für “ng serve” und den folgenden Befehl “ng build” gibt es die Möglichkeit unterschiedliche Konfigurationen zu laden.

Mehr dazu hier.

Für “ng serve” ist die Möglichkeit der Proxy Config eine sehr interessante Option. Dies ermöglicht den Dev-Server auch direkt als Proxy zu verwenden. Hierzu wird eine proxy config definiert, somit können Pfade auf andere Ziele weitergeleitet werden. Dies ist vorallem sehr hilfreich um CORS zu umgehen.

Alle Optionen finden sie in der Angular Dokumentation

ng build

Mit der build Methode stellt Angular CLI die Möglichkeit bereit die Applikation sehr einfach zu bauen. Angular CLI übernimmt hier auch die Grundlegenden Dinge, wie zum Beispiel, Bundeling und Tree-Shaking, Ressourcen werden automatisch in das “dist” Verzeichnis kopiert.

Mit dem “–prod” Flag wird auch automatisch UglifyJS verwendet in einem gewissen Rahmen toten, nicht verwendeten Code zu entfernen, sowie der Code minimiert.
Automatisch wird in disem Fall auch die von Angular CLI automatisch angelegte “production” Konfiguration gebaut.

Wichtig ist auch die Möglichkeit der “–aot” Flag verwendet beim Bauen dann die “ahead of time compilation”.

Alle Optionen finden sie in der Angular Dokumentation

 

Die Möglichkeit der Konfiguration

Angular CLI erstellt automatisch beim erstellet eine “development” und eine “production” Konfiguration. Es ist aber auch möglich hier beliebig viele eigene Konfigurationen (Environments) zu erstellen.
Diese können dann auch immer über eine Option direkt ausgewählt werden.

So können über die Konfiguration verschiedene Werte definiert werden für die jeweilige Environment (Entwicklung / QS / Live), dies macht zum Beispiel Sinn, für Endpunkte von API’s, Zugangsdaten, Einstellungen zum Logging oder sonstigen Werten, welche sich unterscheiden sollen.

In der Applikation können die Werte aus der Konfigurationsdatei ganz einfach angezogen werden, wie hier zu sehen:

Zunächst ein Beispiel der zwei verschiedenen Enviroment Konfigurationen:

export const environment = {
  production: false,
  proxy: false,
  service1: 'http://localhost:3001/',
  service2: 'http://localhost:3002/'
};

export const environment = {
  production: false,
  proxy: true,
  service1: '/api/service-1/',
  service2: '/api/service-2/'
};

Einbindung in der Service Implementierung:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable, of} from 'rxjs';
import {ServiceInfo} from '../data/service-info';
import {environment} from '../../environments/environment';

const SERVICE_ONE = environment.service1;
const SERVICE_TWO = environment.service2;

@Injectable({
  providedIn: 'root'
})
export class DemoService {
  constructor(private http: HttpClient) {
  }

  getServiceOne(): Observable<ServiceInfo> {
    return this.http.get<ServiceInfo>(SERVICE_ONE);
  }
}

 

 

Wichtig ist, dass alle Werte, bzw. deren Schlüssel in der Basisdatei (src/environments/environment.ts) vorhanden sind. Nur dadurch kann Angular CLI wissen, dass diese benötigt werden.

Beim Aufruf über die Angular CLI können diese Werte aber auch aus der Kommando Zeile überschrieben werden. Dieses Vorgehen ist allerdings sehr untypisch und sollte vermieden werden.

 

Der Workflow mit der Angular CLI

Ein neues Projekt legen wir also mit “ng new” an, danach erstellt uns Angular ein vordefiniertes Projekt mit den nötigen Konfigurationen und einem Basis Setup. Mit der Angular CLI Unterstüzung können wir nun weitere Module und fertige Librarys einbinden durch “ng add”.

Mit “ng generate” können wir komplette Module, Komponenten und Services erstellen lassen, welche wir anschließend nur noch mit Funktionalität befüllen müssen. Dank der zahlreichen Optionen haben wir hier auch sehr gut im Griff wie unsere Strukturen aussehen sollen.

Regelmäßig sollte man “ng lint” und “ng test” ausführen, am besten bei jedem build, da diese Befehle sehr schnell zeigen ob meine Applikation funktioniert (vorrausgesetzt es wurden auch Tests geschrieben) und ob mein Code leserlich und “schön” ist.

“ng update” sollte man nicht vergessen, es lohnt sich immer wieder mit “ng update” auf die neusten Angular Versionen zu migrieren. Dies sollte man allerdings nicht automatisch machen, außer man hat wirklich eine sehr gute Abdeckung durch Tests.

Während die Applikation entwickelt wird ist “ng serve” der beste Freund des Entwicklers. Die Vorteile liegen, selbst wenn man nicht die Proxy Config benötigt, auf der Hand. Es gibt eigentlich keine schnellere Möglichkeit seine Änderungen direkt im Browser anzuzeigen.

Zum Bauen und Ausrollen der Applikation verwenden wir dann “ng build”. Dieser Befehl ermöglicht es unsere Angular Applikation zu bauen. Mit den möglichen Optionen und Parametern kann hier noch auf einiges Einfluss genommen werden. Die Standard Konfiguration hierzu wird in der angular.json hinterlegt.

Sinnvoll ist es auch mehrere Angular CLI Befehle miteinander zu verbinden oder auch häufig genutzte Befehle mit den gleichen Parametern und dies in der package.json zu hinterlegen.

Wie hier im Beispiel:

{
  "name": "demo-angular-express",
  "version": "0.0.0",
  "scripts": {
    "demo1": "ng serve --prod --configuration=noproxy",
    "demo2": "ng serve --configuration=proxy --proxy-config proxy.conf.json",
    "demo3": "ng build --prod --configuration=noproxy",
    "demo4": "ng build --prod --configuration=proxy"
  },