Suche
Das bedeutet das inkrementelle Update in der Praxis

Angular 4.3.0 erschienen: Die neuen Features auf einen Blick

Karsten Sitterberg
 © Shutterstock / heromen30

Es ist wieder einmal soweit: Das Angular-Team hat eine weitere Version seines Web Frameworks freigegeben. Dabei handelt es sich diesmal um die Minor-Version Angular 4.3.0. Entsprechend des Semantic-Versioning, auf das sich das Angular-Team verständigt hat, enthält diese Version einige (wesentliche) Neuheiten, jedoch keine „Breaking Changes“.

In den meisten aktuellen Projekten, die ohnehin auf Angular 4.x.x aufbauen, wird sich der Aufwand für das Update aufgrund der nicht vorhandenen API-Brüche in engen Grenzen halten. Beispielsweise nutzen mit Angular-CLI generierte Projekte automatisch eine Versionsangabe wie ^4.0.0 für die Angular-Pakete. Mit dieser Versionsbezeichnung wird bei einem frischen „npm install“ die zu dem Zeitpunkt aktuellste kompatible Version installiert. Kompatibel sind nach Semantic-Versioning alle 4.x.x-Versionen. Somit sind für ein Update auf Angular 4.3 dann nur folgende Befehle notwendig:

rm -rf node_modules
npm install

Falls in dem entsprechenden Projekt der Package-Manager yarn, oder eine neuere Version von NPM (z.B. NPM 5) verwendet wird, so muss zusätzlich noch das Lock-File des jeweiligen Package-Managers gelöscht werden, um ein Versions-Update zu ermöglichen.

Angular 4.3: Die Features

Das weitreichendste neue Feature ist ein komplett neues API für den HTTP-Zugriff: ein neuer HttpClient. Um das API um das bisherige HTTP-Modul aus @angular/http kompatibel zu halten, befindet sich der neue HttpClient im Paket @angular/common/http. Im Gegensatz zum bisherigen HTTP-API ist das neue HttpClientModule einfacher zu bedienen, bietet dabei aber deutlich mehr Möglichkeiten zum Konfigurieren der HTTP-Anfragen.

Mit Http-Interceptors gibt es nun eine Funktionalität im HttpClient, um auf HTTP-Anfragen zu reagieren. Damit ist es beispielsweise deutlich einfacher, Querschnittsaspekte wie Autorisierung, Logging und Caching zu implementieren. Bisher war das relativ aufwendig, wie auch in der Artikelserie über Querschnittsaspekte mit Angular und TypeScript beschrieben.

Mit dem neuen HttpClient wird nun bei jedem Request automatisch angenommen, dass die Antwort als Payload im JSON-Format vorliegt.  Vorher musste die Antwort explizit als JSON interpretiert werden.

Für die Requests kann auch ein optionaler Typparameter angegeben werden, besipielsweise in folgender Form:

// ...
public getCustomers(): Observable<Customer[]> {
 return this.http.get<Customer[]>(‘http://example.com/customers’);
}

Bisher hatte der Body einer Http-Response einen “any”-Typen in Angular. Durch den (optionalen) generischen Parameter des neuen HttpClient kann der Typ des Response-Body nun explizit angegeben werden. Intern geschieht dies durch eine implizite Type-Assertion. Es handelt sich also nicht um eine 100%-ige Garantie für Typsicherheit, wie etwa ein Typecast in Java, sondern lediglich um eine Zusicherung an den TypeScript-Compiler.

Während eines HttpRequests ist jetzt außerdem das Abfragen des Fortschritts von Upload- oder Download-Vorgängen möglich. Auch im neuen HttpClient ist ein automatischer XSRF-Schutz integriert. Es werden also automatisch XSRF-Header gesetzt – natürlich unter der Voraussetzung, dass die Serverseite den entsprechenden Cookie für den Client setzt.

Abgesehen vom HttpClient gibt es auch einige kleinere Erweiterungen. Der Router wird etwa durch neue Events für die Route-Guards und -Resolver erweitert. Neben den bisherigen Router-Events wie NavigationStart, NavigationEnd und RoutesRecognized gibt es nun vier weitere Events: GuardsCheckStart, GuardsCheckEnd, ResolveStart und ResolveEnd. Diese besitzen allerdings bisher einen experimentellen Status. Einsetzen kann man sie beispielsweise für Performance-Messungen.

Die GuardCheck-Events beziehen sich jeweils auf den Anfang und das Ende der Guard-Checking-Phase, die Resolve-Events auf die entsprechenden Zeitpunkte bei den Route-Resolvern. Die Events für die Route-Resolver werden in der momentanen API-Version auch gefeuert, wenn für die aktuelle Route keine Resolver spezifiziert sind.

Im Bereich der Animationen unterstützt Angular nun das Deaktivieren von Animationen durch das neue [@.disabled]-Attribut. Beispielsweise könnte man dieses Attribut an eine Checkbox in der Oberfläche binden und so einem User das Aktivieren oder Deaktivieren von Animationen erlauben.

In den CSS/SCSS-Angaben wird der bisherige Shadow-Piercing CSS-Selektor /deep/ deprecated, ebenso wie die Variante „>>>“, da beide Selektoren von Webbrowsern entweder nicht anerkannt werden oder, wie bei Chrome, entfernt werden sollen. Als vorübergehende Abhilfe wurde der Angular-spezifische Selektor ::ng-deep eingeführt.

Wie jedes Release von Angular enthält auch diese Version eine Sammlung von Fehlerbehebungen, sodass sich ein Update in jedem Falle lohnt.

Fazit

Da die Entwickler darauf geachtet haben, Angular 4.3.0 kompatibel zu halten, sollte ein Update ruhig und einfach vonstatten gehen. Aufgrund der Mechaniken hinter den NPM-Versionsangaben sickern bei jedem frischen NPM-Install Änderungen und Neuerungen meist ohnehin unbemerkt in bestehende Software hinein. Die wichtigste Neuerung in Angular 4.3.0 stellt sicher der neue HttpClient dar, welcher mit seinem deutlich vergrößerten Funktionsumfang eine lange benötigte Ergänzung für Angular ist.

Mit Angular 4.3.0 ist nun die planmäßig letzte Minor-Version von Angular 4 erschienen. Das nächste größere Release wird damit schon Angular 5 sein. Es soll am 18. September dieses Jahres erscheinen.

Verwandte Themen:

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.