Suche
Kolumne

Webentwicklung mit Angular: Angular CLI – was bringt das Update?

Karsten Sitterberg

In dieser Folge der Kolumne “Webentwicklung mit Angular” geht Karsten Sitterberg auf das Kommandozeilenwerkzeug Angular CLI ein. Hier haben sich durch die letzten Updates einige spannende Neuerungen ergeben…

Angular CLI ist ein Kommandozeilenwerkzeug, das vom Angular-Team für die Erstellung von Angular-Projekten inklusive Dev- und Prod-Build, Unit- und End-2-End-Testing bereitgestellt wird. Auch wenn sich Seed-Projekte als Alternative großer Beliebtheit erfreuen, ist das Angular CLI das kanonische Werkzeug und wird auch in den offiziellen Tutorials verwendet. Unter der Haube verwendet Angular CLI webpack als Build-System und konfiguriert es auch ohne weiteres Zutun durch den Nutzer.

Bisher musste zur Verwendung des CLI das NPM-Paket angular-cli installiert werden. Seit der Version 1.0.0-beta.29 wurde die Benennung des Paketes an die Namensschemata der Angular-Hauptversionen angepasst.

Ein Hinweis darauf finden Nutzer bereits seit einiger Zeit in den Kommandozeilen-Logs, die zum Beispiel beim Ausführen von Builds wie mit ng serve oder ng build erscheinen:

error As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
error         which will only support Node 6.9 and greater. This package will be officially deprecated
error         shortly after.
error    

Wie ebenfalls aus der Fehlermeldung erkennbar ist, wird zukünftig ein Node.js in Version 6.9 oder höher für Angular CLI vorausgesetzt.

Bei einer Neuinstallation von Angular CLI ändert sich der Aufruf bei der neuen Version in folgenden Befehl:

npm install -g @angular/cli

Soll eine bereits vorhandene Installation von Angular CLI aktualisiert werden, so müssen aufgrund der Namensänderung des Paketes zunächst alle alten Versionen entfernt werden. Im Anschluss wird dann die eigentliche Installation ausgeführt:

npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Nachdem die globale Installation nun erneuert wurde, sollten noch die bestehenden, mit Angular CLI erzeugten Projekte angepasst werden. Dafür werden in diesen zunächst die bisher installierten Libraries und auch das Build-Verzeichnis entfernt.

rm -rf node_modules dist #rmdir unter Windows

Den weiteren Update-Verlauf kann das CLI teil-automatisiert übernehmen. Dafür muss im Projektordner lediglich folgender Befehl ausgeführt werden:

ng update

Unter der Haube kümmert sich das CLI mit diesem Befehl darum, dass zunächst die ursprünglich durch das CLI erzeugten Dateien angepasst werden. Diesen Prozess muss der Nutzer begleiten: Das CLI fragt bei jeder für das CLI relevanten Datei, ob diese mit den neuen Informationen überschrieben werden soll. Der Nutzer kann dann mit Ja („Y“, default) oder Nein („n“) antworten, sich ein Diff („d“) zwischen alter und neuer Datei anzeigen lassen oder eine Hilfe („h“) aufrufen. Ist dieses Prozedere abgeschlossen, so werden automatisch die aktualisierten Abhängigkeiten installiert.

Beim Update sollte vor allem darauf geachtet werden, dass die alten Installationen des CLI gelöscht werden. Da sich der Paketname des CLI geändert hat, werden alte Installationen nicht einfach überschrieben, sondern müssen aktiv gelöscht werden.

In den vorhandenen CLI-basierten Projekten sollte vor allem darauf geachtet werden, dass alle Abhängigkeiten von angular-cli auf @angular/cli umgeschrieben werden. Dies erfolgt durch den ng updateBefehl zwar normalerweise automatisch. Es kann trotzdem nötig sein, dies von Hand zu erledigen, falls beim Update-Prozess Dateien manuell übersprungen wurden.
Im folgenden Beispiel wurde vom Entwickler etwa das Paket “Bootstrap” manuell nachinstalliert.

image00

Wenn nun ng update ausgeführt wird, möchte das CLI die package.json mit der neuen Version überschreiben. Dabei würden auch alle manuell nachinstallierten Pakete gelöscht, wie im nachfolgend gezeigten Diff zu sehen.

image01

Um nun zu verhindern, dass alle eigenen Änderungen überschrieben werden, kann man als Argument „n“ angeben. Alle Dateien, die so übersprungen wurden, müssen hinterher von Hand angepasst werden. Anschließend ist das Update abgeschlossen.

Lesen Sie auch: “Angular 2+ ist vor allem für neue Projekte von Interesse”

Fazit

Das Update, Angular CLI in die @angular-Paket-Scope aufzunehmen, kann als positives Zeichen gedeutet werden. Es zeigt sich deutlich, dass das CLI nicht nur weiterhin dauerhaft durch das Angular Kern-Team gepflegt wird. Mittlerweile ist das CLI sogar so ausgereift, dass es auf eine Ebene mit anderen Angular Kern-Bibliotheken, wie z.B. dem Router oder den Forms, gestellt wurde.

Geschrieben von
Karsten Sitterberg
Karsten Sitterberg
Karsten Sitterberg ist als freiberuflicher Entwickler, Trainer und Berater für Java und Webtechnologien tätig. Karsten ist Physiker (MSc) und Oracle-zertifizierter Java Developer. Seit 2012 arbeitet er mit trion zusammen.
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.