Kapitel 1

Die Werkzeuge

IN DIESEM KAPITEL

• Werkzeuge kennenlernen
• Entwickeln mit Angular und TypeScript
• Angular CLI
• Die Entwicklungsumgebung einrichten

Wer mit Angular und TypeScript eine Webanwendung entwickeln möchte, braucht als Erstes eine Entwicklungsumgebung. Dieses Kapitels will Ihnen helfen, solch eine Entwicklungsumgebung aufzusetzen. Ich zeige Ihnen die verschiedenen Werkzeuge, die Sie dazu brauchen, und was diese tun. Am Ende des Kapitels lernen Sie die Beispielanwendung kennen.

Die Entwicklungsumgebung

Vor gar nicht so langer Zeit reichten noch ein Texteditor, ein Browser und ein Webserver aus, um zumindest eine kleinere Webanwendung schreiben zu können. Wenn Sie aber mit Angular und TypeScript arbeiten wollen, benötigen Sie auch für die kleinste Webanwendung wesentlich mehr Werkzeuge: Sie brauchen eine Entwicklungsumgebung, die unter anderem die folgenden Programme beziehungsweise Werkzeuge beinhaltet:

• Node.js
• npm
• den TypeScript-Compiler
• einen Texteditor
• einen Webserver
• einen Browser

Dazu kommen oft noch weitere Werkzeuge für das Testen der Webanwendung, das Formatieren und Minimieren des Codes und natürlich für die Überprüfung des Codes auf Fehler.

Leider reicht es nicht aus, die Werkzeuge zu installieren. Diese müssen auch konfiguriert werden. Um den Entwicklern eine bisschen Arbeit abzunehmen, hat das Angular-Team Angular CLI entwickelt. Mithilfe dieses Werkzeugs können Sie mit wenig Aufwand ein neues Angular-Projekt starten. Mehr über Angular CLI erfahren Sie im Abschnitt Das Hauptwerkzeug: Angular CLI.

Node.js und npm

Node.js ist eine Laufzeitumgebung für JavaScript. Damit können Sie Kommandozeilenwerkzeuge, Webserver und vieles mehr entwickeln und ausführen. Werkzeuge wie Gulp, Grunt, Karma, ESLint, JSHint kennen Sie vielleicht schon. Eines haben sie alle gemeinsam: Sie wurden in JavaScript geschrieben und werden mit Node.js ausgeführt. Der TypeScript-Compiler und Angular CLI sind da keine Ausnahmen. Aus diesem Grund brauchen Sie Node.js für die Entwicklung einer Angular-Anwendung.

Npm ist ein weiteres wichtiges Element im Werkzeugkasten jedes Webentwicklers. Es wird benutzt, um Pakete zu verwalten. Diese Pakete, auch als npm-Pakete bekannt, können JavaScript, CSS, HTML und mehr beinhalten. Sie definieren npm-Pakete als Abhängigkeiten Ihres Projekts. Beispielsweise hängt ein Angular-Projekt, unter anderem, vom @angular/core-npm-Paket und vom typescript-npm-Paket ab.

In einer Konfigurationsdatei definieren Sie die Abhängigkeiten Ihres Projekts, die Sie im Nachgang dann mit npm installieren. Die Konfigurationsdatei heißt package.json. Alle npm-Pakete, die Sie dort definieren, können nur innerhalb des Projekts verwendet werden. Diese werden deshalb lokale npm-Pakete genannt. Lokale npm-Pakete befinden sich im Verzeichnis node_modules innerhalb Ihres Projektverzeichnisses.

Im Listing 1.1 sehen Sie einen Ausschnitt aus einer package.json-Datei. Neben dem Namen (name-Eigenschaft) und der Version (version-Eigenschaft) sehen Sie dort noch die Eigenschaften dependencies, devDependencies und scripts. Die Ersten beiden sind Objekte, die die Namen und Versionen von Abhängigkeiten beinhalten. Im dependencies-Objekt stehen alle Abhängigkeiten, die Ihre Anwendung zum Laufen braucht. Im devDependencies-Objekt stehen Abhängigkeiten, die nur bei der Entwicklung, aber nicht mehr zur Laufzeit gebraucht werden. Im scripts-Objekt stehen Skripte, die Sie über npm ausführen können. Beispielsweise sind start der Name des Skripts und ng serve das Kommando, das ausgeführt wird (siehe den Abschnitt Das ng-serve-Kommando).

Listing 1.1: Ausschnitt aus einer package.json-Datei. Diese wurde von Angular CLI generiert.

Allgemein führen Sie npm-Skripte mit npm run Skriptname aus. Es gibt einige Skripte, wie zum Beispiel start und test, die Sie auch ohne run ausführen können. Welche Skripte das genau sind, können Sie auf der Webseite von npm unter https://docs.npmjs.com/files/package.json nachlesen. Mit dem Kommando npm run sehen Sie alle Skripte, die in der package.json-Datei des Projekts definiert sind.

In der package.json-Datei haben der Zirkumflex (^) und die Tilde (~) vor einer Versionsnummer eine spezielle Bedeutung: Die Tilde fixiert die ersten beiden Zahlen der Version und nimmt für die dritte einfach die neuste. Der Zirkumflex fixiert die erste Zahl, für die anderen zwei wird die neuste Version genommen. Betrachten wir als Beispiel eine Abhängigkeit abc, von der die Versionen 6.0.0, 6.0.1 und 6.1.0 existieren. Wenn in der package.json 6.0.0 steht, wird für die Abhängigkeit die Version 6.0.0 installiert. Wenn dort ~6.0.0 steht, wird die Version 6.0.1 installiert. Wenn dort ^6.0.0 steht, dann wird die Version 6.1.0 installiert.

Neuere npm-Versionen erzeugen zusätzlich zum node_modules-Verzeichnis auch eine Datei namens package-lock.json. Dort stehen alle npm-Pakete, die sich im node_modules-Verzeichnis befinden, mit ihrer jeweiligen Version. Falls Sie ein Werkzeug für die Versionierung Ihres Codes verwenden, wie zum Beispiel git, sollten Sie diese Datei auch hinzufügen. Sie stellt sicher, dass nachträgliche Installationen die exakt gleichen Versionen von den Abhängigkeiten besitzen.

Npm erlaubt auch die Installation von globalen npm-Paketen. Diese Pakete können dann in jedem Projekt verwendet werden. Meistens installieren Sie Kommandozeilenwerkzeuge, wie zum Beispiel Angular CLI, global.

Wie Sie Node.js und npm installieren, erfahren Sie im Abschnitt Beispielanwendung: Umgebung einrichten.

Mehr über die package.json erfahren Sie auf der Webseite von npm unter https://docs.npmjs.com/files/package.json. Mehr über die package-lock.json erfahren Sie auf https://docs.npmjs.com/files/package-lock.json. Auf der npm-Webseite finden Sie auch weitere Informationen über das Werkzeug und seine Features. Falls Sie noch nie mit npm gearbeitet haben, empfehle ich Ihnen, zumindest den Getting Started-Teil zu lesen. In der Regel haben Versionen in der package.json drei Zahlen, die mit Punkten getrennt werden. Hinter diesen Versionsbezeichnungen steckt eine Versionierungsprozess namens Semantic Versioning. Auch Angular folgt diesem Prozess. Mehr darüber erfahren Sie auf https://semver.org/lang/de/.

Texteditoren

Theoretisch können Sie bei der Entwicklung jeden beliebigen Texteditor nutzen. Allerdings sind nicht alle Texteditoren gleich gut für die Entwicklung von Angular-Anwendungen geeignet. Sie sollten einen Texteditor auswählen, der mindestens Syntax-Highlighting und Code-Vervollständigung für TypeScript unterstützt. Auch die Unterstützung von Code-Refactoring ist etwas, worauf Sie bei der Wahl eines Texteditors achten sollten. Gerade letzteres wird Ihnen, vor allem bei größeren Projekten, sehr helfen.

Ich nutze zwar hier den Term »Texteditor«, ich meine damit aber auch integrierte Entwicklungsumgebungen (IDEs). Ich unterscheide nicht explizit zwischen den beiden Ausdrücken, da die meisten modernen Texteditoren sich mithilfe von Plugins zu integrierten Entwicklungsumgebungen umfunktionieren lassen.

In der Tabelle 1.1 sehen Sie vier Texteditoren, die gut für die Entwicklung von Angular-Anwendungen geeignet sind. Alle vier funktionieren unter Windows, Linux und MacOS. Allerdings bieten die vier Editoren unterschiedliche Grade der TypeScript- beziehungsweise Angular-Unterstützung an. Falls Sie genügend Zeit haben, empfehle ich Ihnen, alle vier Texteditoren zu testen und denjenigen auswählen, der am besten zu Ihnen passt. Falls Sie die Zeit nicht haben, empfehle ich Ihnen Visual Studio Code, wozu Sie mindestens das Angular-Language-Service-Plugin installieren sollten.

Atom

Sublime Text

Visual Studio...