Angular 5.0.0 ist da und hört auf den Namen "pentagonal-donut". Dieser Release zielt vor allem darauf ab, Angular schneller zu machen. Neben haufenweise Performanceverbesserungen und dem Entfernen von veralteten Klassen gibt es auch mehrere größere Änderungen, die vor allem der Geschwindigkeit dienen.

Zur Verbesserung der Geschwindigkeit wurde in dieser Version das Tool mit dem Namen „Build Optimizer“ eingeführt.

Mit diesem Tool wird die Größe der Javascriptdateien in der fertig gebauten Anwendung verkleinert. Es wird hierbei in zwei Schritten vorgegangen:

Die Teile der Anwendung, die vom Entwickler geschrieben wurden, werden als pure markiert. Diese Markierung hilft dabei, das Tree shaking, also das Entfernen von nicht benutztem Code, zu verbessern.

Im zweite Schritt werden die Dekoratoren aus der Javascriptdatei entfernt. Dekoratoren werden von dem Compiler gebraucht, um die Anwendung zu bauen, zur Laufzeit werden sie aber nicht mehr benötgt.

Der Build Optimizer und die Unterstützung von Angular 5.0 wurden nun in die Version 1.5 des Angular CLI eingeführt.

Weitere Änderungen lassen sich bei der Nutzung von Typescript im Compiler sehen.

Der Compiler benutzt nun die Typescript Transforms, was den Bauprozess signifikant verschnellern soll.

Stephen Fluin beschreibt auf seinem Blog einen Geschwindigkeitsgewinn von bis zu 95%. Hierbei wurde ein AOT-Build der angular.io Webseite getestet. Ein Rebuild der Anwendung wurde von mehr als 40 Sekunden auf weniger als 2 Sekunden gesenkt. Durch diesen Erfolg soll in späteren CLI-Versionen das Bauen mit dem AOT-Compiler zum Standard werden.

Weitere Änderungen betreffen die Internationalisierungspipes. Betroffen hiervon sind die Number, Data und Currency pipes.

Es wird nun nicht mehr die i18n API benutzt, da diese unterschiedliche Ergebnisse auf verschiedenen Browsern ergab. Deshalb wurde nun eine eigene Lösung seitens Angular implementiert.

Durch diese Implementierung ändert sich der Umgang mit der LOCALE_ID Variable aus dem Paket Angular core geringfügig. Die Id besitzt nun nur noch die Sprachen, die vorher importiert worden sind, und als Standardwert immer den Wert „en-US“. Um nun andere Sprachen zu importieren, bedarf es einer kleinen Anpassung im App-Module.

Im Provider kann wie gewohnt die Locale auf Deutsch gesetzt werden.

Der Router besitzt nun Events, die benutzt werden können, um auf Routenwechsel zu reagieren.

Die Events können beim Laden eines Pfades aufgerufen werden. ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd<br>

Beim Arbeiten mit guards kann nun mit dem beiden Lifecyclehooks GuardsCheckEnd und GuardsCheckStart vor und nach dem Prüfen des guards Code durchführen. Die Resolver bekommen auch zwei Events, die nach demselben Prinzip funktionieren: ResolveStart, ResolveEnd.

Die Komplexität für das Aktualisieren der Anwendung hängt von der Größe des Projekts und der Ursprungsversion des Projekts ab. In einem Test konnte an einem Projekt ohne Probleme auf die neuste Angularversion aktualisiert werden. Die einzige Anpassung wurde an der Locale_id, wie oben beschrieben, vorgenommen. Nach der Aktualisierung funktionierte die Anwendung noch wie erwartet und auch externe Pakete wie Material 2 funktionierten nach den Änderungen einwandfrei.

Wer beim Aktualisieren nichts vergessen möchte, findet im Update Guide eine Schritt-für-Schritt-Anleitung. Hier kann angegeben werden, von welcher Version zu welcher aktualisiert werden soll und es wird gezeigt, welche nötigen Anpassungen vorgenommen werden müssen.