In dieser Folge der Kolumne \"Webentwicklung mit Angular 2\" stellt Karsten Sitterberg Angular CLI vor. Das Kommandozeilen-Tool wurde vom Angular-2-Team jüngst auf das neue Buildsystem Webpack umgestellt, wodurch sich einige wichtige Änderungen ergeben haben.

Angular CLI Webpack – das bringt’s!

Angular CLI ist ein Werkzeug, um die Erstellung und Entwicklung von Angular-2-Projekten über die Kommandozeile zu erleichtern. Neben der initialen Projekterstellung gibt es auch Kommandos, um Komponenten, Services und andere Klassen zu generieren. Auch zur Projektausführung und Erzeugung von Bundles zur Verwendung in einer produktiven Umgebung liefert Angular CLI passende Unterstützung. Angular CLI nutzt dabei unter der Haube vorhandene Werkzeuge, ganz im Sinne des allgemeinen Vorgehens bei Angular 2. Angular CLI selbst basiert dabei auch schon auf dem ember-cli Projekt.

 

Im September 2016 wurde Angular-CLI vom Angular-2-Team von einem auf Broccoli und SystemJS basierenden Build-System auf das Webpack-Buildsystem umgebaut. Weiterhin wurde das CLI aktualisiert, sodass die seit kurzem verfügbare Release-Version von Angular 2 verwendet wird.

Das bedeutet einerseits, dass inkompatible Änderungen bei Konfiguration und Build-Struktur auf die bisherigen Nutzer von Angular-CLI zukommen werden. Andererseits jedoch werden dadurch Features von Webpack – wie kürzere Build-Zeiten und einfacheres Paket-Management – zugänglich.

Webpack liefert auch die Basis für Ahead-Of-Time-(AoT-)Kompilierung von Templates und Modulen. Davon verspricht man sich optimierte Ladezeiten durch weniger Requests und Reduktion der zu übertragenden Daten.

Viel wichtiger ist jedoch die darauf aufbauenden Möglichkeiten zur Optimierung: Neben dem bekannten Tree-Shaking ist man mit dem Google Closure Compiler und spezialisierten Kompressionsverfahren wie brotli in der Lage, die Downloadgröße einer Hello-World-Angular-2-Anwendung von 150kb auf rund 20kb zu reduzieren. (Für weiterführende Informaztionen zum Thema Reduktion der finalen Anwendungsgröße siehe: http://blog.mgechev.com/2016/07/21/even-smaller-angular2-applications-closure-tree-shaking/)

Webpack

Webpack ist ein multifunktionaler Module-Bundler. Das bedeutet, dass mit Webpack nicht nur JavaScript oder CSS in einzelne Module gepackt werden können, sondern etwa JavaScript, CSS und auch Bilder und Musikdateien in gemeinsame Module gebündelt werden können. Aufgrund dieser Eigenschaften erfreut sich Webpack in der JavaScript Community immer größerer Beliebtheit, sodass teilweise schon von einem “de facto Standard” gesprochen (oder geschrieben) wird.

Die vielen Möglichkeiten, mit Webpack Dateien zu bündeln oder mit Hilfe sogenannter Loader vorzuverarbeiten (z.B. zu transpilieren), können die Webpack-Konfiguration sehr schnell recht komplex werden lassen. Der Gedanke an eine komplette Umstellung des Buildsystems mag daher zunächst Unbehagen bei dem ein oder anderen auslösen. Diesbezüglich kann jedoch Entwarnung gegeben werden: Angular-CLI hakt an dieser Stelle ein und stellt eine Abstraktion bereit, die dem Entwickler die Webpack-Konfiguration weitestgehend abnimmt.

Durch diese Abstraktion hat man zwar nicht die volle Kontrolle über den Webpack-Buildprozess, jedoch stellt das CLI für die Projekt-Konfiguration die Datei angular-cli.json zur Verfügung. In dieser Datei können zum Beispiel globale Stylesheets oder Komponenten-Präfixe konfiguriert werden. Somit kann sich der Entwickler letzten Endes mehr auf die Entwicklung fokussieren und wird weniger mit Konfiguration beansprucht. Konkret bedeutet dies, dass die vorher notwendige Konfiguration von npm-Paketen in SystemJS und für Karma komplett wegfällt oder vom CLI übernommen wird.

In Sachen Entwickler-Unterstützung positiv sind weiterhin die durch Webpack bedingte kürzeren Build-Zeiten zu erwähnen, was einen schnelleren Entwicklungsprozess ermöglicht. Aus den Weekly Notes des Angular Teams ist zu erfahren, dass Webpack außerdem wichtig ist, um Offline-Compile-Funktionalität des CLI bereitzustellen.

Die Umstellung: Webpack und Angular 2 Final

Mit der Umstellung des Angular-CLI von Version 1.0.0-beta.10 auf eine Webpack-Version (z.B.  1.0.0-beta.15) wird gleichzeitig ein Update von Angular 2 RC4 nach Angular 2.0.0  durchgeführt.

(Hinweis: Für alle, die von den Umstellungen bei “Release-Candidate-Versionen“ frustriert sind – das Angular-2-Team hat versprochen, auf eine semantische Versionierung zu wechseln und die APIs nur noch in großen Updates zu brechen.http://angularjs.blogspot.de/2016/09/angular2-final.html)

Der erste Schritt besteht nun darin, erst einmal die globale Installation des CLI zu deinstallieren, um dann die neueste Version des CLI in der Webpack-Variante zu installieren. Dies geschieht mit den folgenden Kommandos:

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

Um die “Umkonfiguration” so einfach wie möglich zu halten, sollte zunächst ein neues Projekt aufgesetzt werden.

ng new migration-project

Dieses Projekt wird später das ursprüngliche Projekt ersetzen.

Als nächstes wird der src-Ordner des neuen Projektes gesichert und mit dem src-Ordner des alten Projektes ersetzt.

mv src/ src.migration/
mv ${OLD_PATH}/src src

Hier können die Dateien entfernt werden, welche mit Webpack nicht mehr benötigt werden.

rm src/system-config.ts
rm src/typings.d.ts

Aus dem gesicherten Migration-Ordner können nun die für den Webpack-Prozess benötigten App-Dateien rüberkopiert werden.

cp src.migration/polyfills.ts src/
cp src.migration/styles.css src/
cp src.migration/test.ts src/
cp src.migration/tsconfig.json src/
cp src.migration/typings.d.ts src/

Weiterhin können im Regelfall die Dateien src/main.ts und src/index.html mit den Dateien src.migration/main.ts und src.migration/index.html überschrieben werden. Lediglich wenn eigene Änderungen an den Dateien vorgenommen wurden, sollte hier vorsichtig, z.B. mit einem Diff, vorgegangen werden.

Für die notwendige Anpassung der App-Umgebung müssen die entsprechenden Dateien umkopiert werden.

cp ${OLD_PATH}/config/environment.*.ts src/environments/
mv src/environments/environment.dev.ts src/environments/environment.ts

Die verschiedenen Umgebungen sind nun Teil der Anwendung und werden in der angular-cli.json konfiguriert. Die Pfadangaben dort erfolgen relativ zu main.ts.

Alle benötigten Third-Party-Abhängigkeiten (z.B. moment.js, Angular-2-Material) sollten mittels npm install --save ${LIBRARY} in dem neuen Projekt installiert werden. Die Installation der zugehörigen Typinformationen erfolgt nicht mehr mittels typings, sondern (durch den Einsatz von TypeScript 2.0) ebenfalls durch NPM, und zwar in folgender Form:

npm install --save-dev @types/${LIBRARY}

Eventuelle Konfigurationsdateien für diese Abhängigkeiten sollten natürlich aus dem alten Projekt übernommen werden.

Bisher wurden die externen Styles und Templates der Angular-2-Komponenten dynamisch durch SystemJS nachgeladen. Dafür war mit Angular-CLI die Angabe moduleId: module.id im Komponenten-Decorator notwendig. Da mit Webpack die externen Files nun inline spezifiziert werden, sollte diese Angabe nun entfernt werden. (Ein weiterer Grund zum Entfernen dieser Angabe ist, dass Webpack für die module.id eine Zahl ausgibt, während Angular einen String erwartet).

Falls für die Stylesheets Precompiler wie Sass oder Less verwendet werden sollen, müssen die Imports in den styleUrls entsprechend umbenannt werden, da diese automatisch von Webpack übersetzt werden. (Bsp: styleUrls: [‚my-component.scss‘]).

Aus der alten Anwendung sollten ebenfalls die LICENSE- und README.md-Dateien kopiert werden. Wenn die bisherige Anwendung zusätzliche Asset-Dateien benötigt, müssen diese ebenfalls im neuen Projekt abgelegt werden. Allerdings sind sie jetzt Teil der App, d.h. sie wandern aus dem Wurzelverzeichnis in das src-Verzeichnis.

cp -R ${OLD_PATH}/public/ src/assets/

Da mit der Umstellung von Angular-CLI 1.0.0-beta.10 auf Version 1.0.0-beta.15 auch die Umstellung von Angular 2 RC4 auf die finale Version einhergeht, sind die Sourcen ebenfalls auf das neue Modulsystem umzustellen, siehe dazu das Changelog der Angular Realeases, speziell für die Versionen Angular 2 RC5 und RC6, da hier die Umstellung auf das neue Modulsystem beschrieben ist.

Im einfachsten Falle ist einfach eine Modul-Datei /src/app/app.module.ts für die App mit folgendem Inhalt anzulegen.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [AppComponent],
  imports: [
        BrowserModule,
        CommonModule
  ],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Für das Ausführen der Tests im neuen Modulsystem müssen diese ebenfalls angepasst werden. Die Anweisung addProviders wird zum Beispiel durch TestBed.configureTestingModule ersetzt.

  beforeEach(() => {
        addProviders([AppComponent]);
  });

wird ersetzt durch

  beforeEach(() => {
        TestBed.configureTestingModule({
              declarations: [
                    AppComponent
              ],
        });
  }); 

Um eine Komponente zum Testen aufzusetzen, steht nicht länger der TestComponentBuilder zur Verfügung, stattdessen wird das TestBed verwendet.

  it('should create the app', async(() => {
        let fixture = TestBed.createComponent(AppComponent);
        let app = fixture.debugElement.componentInstance;
        expect(app).toBeTruthy();
  }));

Nun sollte zum Beispiel mit einem ng build überprüft werden, ob die Anwendung wieder gebaut werden kann und ggf. wieder lauffähig ist. Dann können auch die Migration-Sources gelöscht werden.

rm -rf src.migration/

Zu guter Letzt kann dann das .git-Verzeichnis gelöscht und aus dem alten Projekt wiederhergestellt werden.


rm -rf .git/
cp -R ${OLD_PATH}/.git .

Fazit

Mit dem Upgrade auf Webpack und den damit verbundenen Möglichkeiten wird die gute Basis für das Angular CLI weiter gestärkt, und zukünftige Weiterentwicklungen werden unterstützt.  Daher sollte man sich – wenn man noch nicht damit angefangen hat – jetzt mit dem Angular CLI vertraut machen, um sich ein mächtiges Tool für zukünftige  Entwicklungen zu sichern. Neben der Kommandozeile bieten einige IDEs (WebStorm) auch jetzt schon Integrationen, um direkt aus der IDE heraus die verschiedenen Angular CLI Tasks aufzurufen.