Die Neuerungen in Angular 5

Inhaltsverzeichnis

Am 1. November 2017 war es soweit: Angular in Version 5 und das Angular Command-line Interface (CLI) in Version 1.5 erscheinen. Ein neuer Meilenstein in der Entwicklung des Frameworks. Dieser Artikel beleuchtet die neuen Features und Änderungen und wo Entwickler gegebenenfalls Breaking Changes erwarten können.

Angular Build Optimizer

Das Angular CLI 1.4 hat den Build Optimizer bereits eingeführt. Er zielt generell darauf ab, kleinere Ausgabedateien zu erzeugen, um die Anwendung schneller zum Client zu übertragen, und ein schnelleres Parsen zu ermöglichen. Vor Angular 5 konnten Entwickler den Build Optimizer mit dem Befehl ng build via Flag --build-optimizer (oder kurz-bo) einschalten. Zusammen mit dem Angular Production Build --prod kann er den entstehenden Code weiter optimieren, was zu einer kleineren Ausgabe führt. Zum einen analysiert er den Code für den späteren Tree-Shaking-Prozess, um nicht benutzte Teile der Applikation zu entfernen. Zum anderen entfernt der Build Optimizer die Angular Decorators, die nur der Angular Compiler nutzt, aber die zur Laufzeit der Anwendung nicht gebraucht werden. Beide Optimierungen zielen darauf ab, nicht benutzten Code zu entfernen, was die gesamte Anwendung verkleinert und das Parsen im Browser beschleunigt. Die Anwendung steht dadurch schneller zur Verfügung.

Neu mit dem Angular CLI 1.5 ist, dass der Build Optimizer standardmäßig eingeschaltet ist und somit jeder davon profitieren kann. Wer den Bundle Optimizer nicht benutzen möchte, kann ihn via Flag --build-optimizer=false ausschalten. Das kann bei größeren Projekten der Fall sein, da der Build Optimizer durch die statische Codeanalyse viel RAM benötigt, oftmals mehr, als Node.js standardmäßig zur Verfügung stellt. Alternativ kann man dem Node.js-Prozess mehr RAM zuweisen. Mit dem Befehl node --max_old_space_size=4096 node_modules/.bin/ng startet ein Angular-CLI-Prozess mit einer erlaubten Obergrenze von 4 GB RAM.

Angular Universal State Transfer API

Angular Universal erlaubt das Rendern einer Angular-Applikation auf dem Server. Der Server liefert daraufhin eine fertige HTML-Seite aus, was speziell für Suchmaschinen zur Indizierung nützlich ist. Kann der Client, also der Browser, JavaScript ausführen, lädt sich Angular in die bestehende fertige Seite nach. Der Prozess heißt Hydration. Möchte man nun den State vom Server zum Client übertragen (beispielsweise über HTTP Daten geladen werden) oder vom Client zum Server übertragen, stellt Angular hierfür die Module ServerTransferStateModule und BrowserTransferStateModule zur Verfügung.

Zusätzlich integriert die Serverplattform von Angular das Projekt Domino (*DOM in No*de), das eine bessere DOM-Manipulation in Node.js ermöglicht. Das erlaubt die Nutzung weiterer 3rd-Party-JavaScript-Bibliotheken, die keinen Support für Server Side Rendering anbieten.

Incremental Ahead-of-Time Build

Der verbesserte Angular Compiler unterstützt einen inkrementellen AoT-Build (Ahead-of-Time). Generell sorgt der AoT-Build bei Angular dafür, die HTML-Templates nach JavaScript zu transpilieren, was für eine schnellere Interpretation sorgt. In den Versionen vor Angular 5 konnte man AoT immer nur vollständig, aber nicht inkrementell bauen. Das kann zu erhöhtem Testaufwand führen, da man im Browser in der Regel die JIT-Variante getestet hat, zur Produktion allerdings ein AoT-Bundle generiert hat. Mit der Unterstützung eines inkrementellen AoT-Builds kann künftig während der Entwicklung ein AoT-Build-Test stattfinden. Das funktioniert mit dem Kommando ng serve --aot. Es ist anzumerken, dass der Modus in einer der kommenden Versionen der Angular CLI standardmäßig aktiviert ist. Wann genau, ist allerdings noch nicht bekannt.