Dateien für die Entwicklung mit Angular benötigt werden und welche Abhängigkeiten untereinander bestehen. Zugegeben, eine »rohe« Angular-Anwendung braucht verhältnismäßig viele Vorbereitungen, die wir uns als Entwickler nicht merken möchten. Außerdem sind die Schritte für die meisten Einsatzzwecke immer gleich. Weiterhin wollen wir für die Entwicklung nicht auf eine Online-Plattform zurückgreifen, sondern mit unserer lokalen IDE arbeiten.
Angular bringt dafür ein ausgereiftes Tool mit, das uns bei der Arbeit mit unseren Projekten durchgehend unterstützt: die Angular CLI. In diesem Kapitel werden wir die Installation und die wichtigsten Befehle des Kommandozeilentools kennenlernen.
3.1Das offizielle Tool für Angular
Codegenerierung und Automatisierung
Die Angular CLI1 ist der offizielle Helfer für unsere Angular-Anwendungen. Das Tool beinhaltet Vorlagen und Befehle für alle wiederkehrenden Aufgaben, vom Anlegen eines Projekts über Codegenerierung bis hin zur Ausführung von Unit-Tests und dem finalen Deployment. Der generierte Code orientiert sich stets am offiziellen Styleguide von Angular.2 Somit folgen alle Angular-Projekte einer konsistenten Struktur und bauen auf dieselbe Toolchain auf.
Tooling für die Entwicklung Webserver mit Live Reload
Beim Anlegen eines neuen Projekts wird alles Nötige vorbereitet: Alle Dateien werden angelegt, NPM-Pakete werden installiert und das Projekt wird unter Versionsverwaltung (Git) gestellt. Während der Entwicklung können wir die Grundgerüste für unsere Komponenten, Services, Pipes und Direktiven automatisch generieren lassen. Dabei ist es sogar möglich, eigene Vorlagen (Schematics) in ein Projekt zu integrieren. Wiederkehrende Aufgaben wie das Bauen des Projekts oder die Ausführung von Unit- und Oberflächentests sind bereits eingerichtet. Auch ein Webserver für die Entwicklung wird mitgeliefert, sodass wir das Projekt ohne zusätzliche Abhängigkeiten direkt auf dem lokalen System ausführen können. Eine Überwachung des Dateisystems (kurz: watch) sorgt dafür, dass die Anwendung bei jedem Speichervorgang automatisch im Browser aktualisiert wird. Außerdem werden Skripte angeboten, um eine Anwendung automatisch zu aktualisieren oder andere Pakete in das Projekt zu integrieren. Kurz: Die Angular CLI unterstützt uns durch die Automatisierung bei allen Routineaufgaben rund um unser Angular-Projekt.
Node.js und Webpack
Die Angular CLI ist ein Kommandozeilentool auf Basis von Node.js. Die Transformation der TypeScript-Dateien und Stylesheets sowie viele weitere Schritte werden mithilfe von Webpack durchgeführt.3 Webpack ist ein Module Loader und Bundler und ist dafür verantwortlich, alle Teile unserer Anwendung zu verpacken, bevor sie an den Client ausgeliefert werden.
Die Angular CLI kann uns also einen Großteil der wiederkehrenden Arbeit abnehmen. Lassen Sie uns das Tool ausprobieren.
3.2Installation
Um die Angular CLI nutzen zu können, müssen wir das Tool als globales NPM-Modul installieren:
$ npm install -g @angular/cli
Die Angular CLI lässt sich nach der Installation einfach mit dem Befehl ng auf der Kommandozeile ausführen.
Auf eine globale Installation verzichten
Wenn wir die Angular CLI nicht global installieren wollen, können wir für die Ausführung auch das Tool npx verwenden. npx wird zusammen mit Node.js und NPM installiert. Wir können damit ein Programm aus einem NPM-Paket ausführen. Existiert das Paket nicht im aktuellen Projekt, so wird es temporär heruntergeladen. Heißt der auszuführende Befehl anders als das dazugehörige NPM-Paket, so können wir mit -p das Paket angeben, aus dem der Befehl stammt.
$ npx -p @angular/cli ng <command>
Führen wir diesen Befehl innerhalb eines Angular-Projekts aus, wird die lokal installierte Version der Angular CLI genutzt, die in der Datei package.json definiert ist und im Verzeichnis
Wir empfehlen Ihnen für den Anfang dennoch, die Angular CLI global auf Ihrer Maschine zu installieren, damit der Befehl ng direkt verfügbar ist.
3.3Die wichtigsten Befehle
Möchten wir ein neues Projekt beginnen, so generieren wir dieses mit dem Befehl ng new.
$ ng new my-first-project
Listing 3–1 Neues Projekt generieren
Die Angular CLI wird Ihnen mithilfe einer Eingabeaufforderung einige Fragen stellen. Sie können eine Auswahl mit den Pfeiltasten treffen und mit der
Wir wechseln in den neuen Ordner und können gleich weitermachen – z. B. noch eine zusätzliche Komponente generieren.
$ cd my-first-project
$ ng generate component my-first-component
Listing 3–2 Komponente erstellen
Hilfreich ist es, die vielen Parameter zu kennen und einordnen zu können. Im Anhang A ab Seite 797 sind daher alle Befehle aufgelistet. Wir können uns auch ein wenig Tipparbeit sparen, wenn wir statt der ausgeschriebenen Parameter deren Aliase verwenden. Der folgende Befehl ist äquivalent zum vorherigen.
$ ng g c my-first-component
Listing 3–3 Komponente erstellen mit dem Kurzbefehl
Die Angular CLI dient vor allem dazu, uns an vielen Stellen Arbeit abzunehmen. Wir sind schon jetzt auf demselben technischen Stand wie zum Ende des Schnellstarts. Die Anwendung lässt sich bereits mit ng serve oder npm start ausführen. Wie es sich für professionelle Software gehört, wurden auch gleich Unit-Tests für die Komponenten angelegt. Natürlich hat die Anwendung noch keine wirklichen Funktionen, sodass auch die angelegten Unit-Tests entsprechend kurz ausfallen. Wir können aber dennoch schon einmal prüfen, ob die automatisch erzeugten Tests fehlerfrei durchlaufen.
$ ng test
Listing 3–4 Unit-Tests ausführen
Sie sehen: Einfacher geht es kaum! Mehr zur Angular CLI erfahren wir ab
