Angular. Ferdinand Malcher

Angular

Node.js und NPM installieren

Node.js bietet auf der Projektwebseite Installationspakete für die verbreitetsten Betriebssysteme zum Download an. Einige Linux-Distributionen führen Node.js auch in den offiziellen Paketquellen, allerdings zum Teil nicht immer in aktueller Version. Wir empfehlen die Verwendung der offiziellen Installationspakete¹⁶ bzw. Repositorys von Node.js. Hier sollten Sie die LTS-Variante wählen, denn sie wird breitflächig von den meisten Paketen unterstützt.

macOS: Homebrew einsetzen

Sollten Sie macOS verwenden, so empfehlen wir hingegen nicht das offizielle Installationspaket. Sie werden wahrscheinlich bei einigen Befehlen eine Fehlermeldung erhalten, wenn Sie diese nicht mit erweiterten Rechten (sudo) ausführen. Wir empfehlen hier die Installation über den Paketmanager Homebrew.¹⁷ Installieren Sie zunächst Homebrew und anschließend Node.js über den folgenden Befehl:

$ brew install node

Listing 2–1 Node.js mithilfe von Homebrew installieren

Nach der Installation prüfen wir auf der Kommandozeile, ob node und npm richtig installiert sind, indem wir die Versionsnummer ausgeben:

$ node -v

$ npm -v

Listing 2–2 Versionsnummer von Node.js und NPM ausgeben

Achten Sie darauf, dass Node.js und NPM stets aktuell sind, denn manche Tools funktionieren mit alten Versionen nicht.

NPM-Pakete installieren

Stehen node und npm ordnungsgemäß bereit, so können wir NPM zur Installation von Paketen verwenden. Dabei ist zu unterscheiden, ob ein Paket lokal oder global installiert werden soll.

Lokale Installation

Installieren wir NPM-Pakete lokal, wird im aktuellen Verzeichnis ein Unterordner mit der Bezeichnung node_modules erstellt. Darin befinden sich die installierten Pakete. Diese Variante empfiehlt sich zur Installation von Abhängigkeiten oder Befehlen, die wir innerhalb des aktuellen Projekts benötigen. Das gilt unabhängig davon, ob wir Angular oder eine andere Technologie einsetzen. Im Hauptverzeichnis eines Projekts existiert häufig eine Datei mit dem Namen package.json, in der alle NPM-Abhängigkeiten verzeichnet sind. Darauf gehen wir auf Seite 62 noch ausführlicher ein, wenn wir unser Beispielprojekt anlegen.

Generell gilt, dass eine lokale Installation der globalen vorzuziehen ist. Stellen wir uns vor, dass auf unserem System mehrere Softwareprojekte entwickelt werden. Jedes Projekt setzt NPM-Pakete in verschiedenen Versionen ein. Wenn nun alle Pakete global installiert sind, kann es zu Versionskonflikten, also unerwartetem Verhalten unserer Projekte kommen. Aus diesem Grund bevorzugen wir die lokale Installation.

$ npm install -g <paketname>

Listing 2–3 NPM-Pakete lokal installieren

Globale Installation

Bei der globalen Installation ist das entsprechende Paket aus allen Node-Anwendungen heraus erreichbar. Diese Variante bietet sich dann an, wenn die Pakete ausführbare Kommandozeilenbefehle beinhalten. Die Befehle sind bei einer globalen Installation aus jedem Arbeitspfad heraus aufrufbar. Ein häufiger Anwendungsfall für globale Pakete ist, Tools für die Kommandozeile bereitzustellen. Später in diesem Buch werden wir die Angular CLI kennenlernen (ab Seite 21). Sie vereinfacht die Erstellung und Ausführung von Angular-Projekten.

$ npm install <paketname>

Listing 2–4 NPM-Pakete global installieren

node-gyp

Es gibt einige NPM-Pakete, die plattformspezifische binäre Artefakte benötigen. Diese Pakete verwenden während der Installationsphase das »Node.js native addon build tool« (node-gyp), um ausführbaren Code zu kompilieren. Sollten Sie einen Fehler bezüglich node-gyp auf der Kommandozeile sehen, so installieren Sie am besten die fehlenden Softwarepakete entsprechend der Installationsanleitung auf GitHub.¹⁸

Tipp: Windows-Build-Tools installieren

Für Windows-Nutzer empfehlen wir die sehr komfortable Einrichtung von node-gyp mithilfe der Windows-Build-Tools:

npm install -g windows-build-tools

Führen Sie diesen Befehl als Administrator aus. Schließen Sie bitte unbedingt nach der Installation die aktuelle Shell und starten Sie eine neue Shell für weitere Befehle.

Anschließend können Sie NPM-Pakete mit einer Abhängigkeit zu node-gyp problemlos installieren.

Zusammenfassung

Unsere Arbeitsumgebung ist nun eingerichtet, und wir sind startklar, um mit Angular zu beginnen. Die vorgestellten Tools greifen uns bei der Arbeit mit Angular unter die Arme, sodass wir viele Dinge nicht von Hand erledigen müssen. Vor allem ein robuster und featurereicher Editor kann uns viel Tipparbeit abnehmen. Los geht’s!

2.4Codebeispiele in diesem Buch

Hosting auf GitHub

Dieses Buch enthält viele Beispiele, um die Funktionen der Angular-Plattform zu demonstrieren. Die dazugehörigen Projekte haben wir Ihnen zentral zur Verfügung gestellt. Unter

https://ng-buch.de/bm4-demo

erhalten Sie Zugriff auf eine Online-Demo des Beispielprojekts Book-Monkey. Alle Projekte sind auf der Entwicklerplattform GitHub¹⁹ gehostet. Wenn Sie mit Git²⁰ arbeiten, können Sie jedes GitHub-Repository direkt über folgende Kurzlinks klonen und verwenden.

$ git clone https://ng-buch.de/bm4-code.git

Listing 2–5 Beispielprojekt als Komplettpaket klonen

$ git clone https://ng-buch.de/bm4-it1-comp.git

$ git clone https://ng-buch.de/bm4-it1-prop.git

$ git clone https://ng-buch.de/bm4-it1-evt.git

$ git clone https://ng-buch.de/bm4-it2-di.git

$ git clone https://ng-buch.de/bm4-it2-routing.git

$ git clone https://ng-buch.de/bm4-it3-http.git

$ git clone https://ng-buch.de/bm4-it3-rxjs.git

$ git clone https://ng-buch.de/bm4-it3-interceptors.git

$ git clone https://ng-buch.de/bm4-it4-forms.git

$ git clone https://ng-buch.de/bm4-it4-reactive-forms.git

$ git clone https://ng-buch.de/bm4-it4-validation.git

$ git clone https://ng-buch.de/bm4-it5-pipes.git

$ git clone https://ng-buch.de/bm4-it5-directives.git

$ git clone https://ng-buch.de/bm4-it6-modules.git

$ git clone https://ng-buch.de/bm4-it6-lazy.git

Скачать книгу