Im vergangenen Herbst hatte das Angular-Team den neuen Release-Plan angekündigt, der ein neues Major-Release von Angular rund alle sechs Monate vorsieht. Nachdem im März 2017 Angular 4 final erschienen ist, war die nächste Version – Angular 5 – für Oktober angekündigt. Geplant war das finale Release für den 23. Oktober; nach acht Beta-Versionen sind noch einige Release Candidates erschienen, in denen viele der Neuerungen vorab zum Testen bereitstanden. Seit dem 1. November ist Angular 5 nun da.

Angular 5.0 ist da: Codename „pentagonal-donut“

Angular 5 erscheint mit höflicher Verspätung und etlichen Verbesserungen, neuen Features sowie einer gesteigerten Performance – plus einer Reihe von Breaking Changes. Die zehn Tage, die das Team für Angular 5 länger als ursprünglich geplant brauchte, dienten einem umfangreichen Bughunting, sodass gleich acht Release Candidates mehr veröffentlicht wurden, als vorgesehen waren.

Seit Angular 4.2 ist das aktuelle Release die erste Version des Frameworks, die wieder einen Codenamen trägt. War dieser für Version 4.2 noch „salubrious-stratagem“ (heilsame Kriegslist), benannte das Team die aktuelle Version „pentagonal-donut“ (fünfeckiger Donut). Zu den wichtigsten Änderungen gehören natürlich das Update auf TypeScript 2.4, die I18N Pipes und die abgeschaffte Nutzung des Intl APIs für einen verbesserten Browser-Support.

Viele der Neuerungen sind bereits aus der Beta-Phase bekannt. So ist im finalen Release natürlich der neue Build Optimizer enthalten, der zu Angular CLI gehört und von hier bereits im Rahmen der vierten und fünften Beta im August erwähnt wurde. Das Tool verkleinert Bundles, indem unnötige Teile der Anwendung entfernt und bestimmte Teile als pure markiert werden. Außerdem entfernt der Build Optimizer Decorators aus dem Runtime Code, um die Codebasis zu verkleinern.

Neu ist außerdem das Angular Universal State Transfer API. Es kann dazu genutzt werden, Application States zwischen Server Side und Client Side Versions der Anwendung zu teilen. Dafür wurden Angular 5 ServerTransferStateModule und BrowserTransferStateModule hinzugefügt, worüber Informationen serverseitig gerendert und an den Client transferiert werden können, ohne dass sie neu generiert werden. Dies sei besonders dann nützlich, so der offizielle Blogpost zum Release, wenn eine Anwendung Daten via HTTP abruft.

Auch der Compiler an sich wurde überarbeitet, sodass er seit Version 5 inkrementelles Kompilieren unterstützt. Dadurch sollen Rebuilds schneller möglich sein. Außerdem arbeite der Compiler nun als TypeScript Tansform. Insgesamt ist zum Angular Compiler zu sagen, dass hier deutlich an der Performance gedreht wurde: bei einem inkrementell durchgeführten AOT Build von angular.io sei die benötigte Zeit um 95 Prozent gesunken – von 40 Sekunden auf weniger als 2.

Auch der Decorator Support wurde überarbeitet. Angular 5 erlaubt nun die Verwendung von Values, die nur zur Runtime verarbeitet werden können. Zu den weiteren Änderungen gehören neue Number, Date und Currency Pipes, die keine i18n Polyfills mehr benötigen. Die i18n APIs wurden in Angular 5 durch eigene Implementierungen ersetzt. Im weiteren wurde RxJS wurde auf Version 5.5.2 und neuer gesetzt und es stehen neue Router Lifecycle Events zur Verfügung

Angular CLI ist ab Version 1.5 mit Angular 5 kompatibel. Alle Informationen zu diesen und allen weiteren Änderungen und neuen Features in Angular 5 hat Stephen Fluin im Angular Blog zusammengefasst. Eine Liste mit sämtlichen Bugfixes und Änderungen gibt es wie immer auf GitHub.

Auch interessant: Angular 5 vs. React – Wer hat wo die Nase vorn?

Angular 5.0: Letzte Testphase bringt Verbesserung der Performance & Bugfixes [Update vom 13.10.]

Wie nicht anders zu erwarten, wird die Anzahl der hinzugefügten Features in Richtung Ende eines Projektes immer geringer. So auch bei Angular 5, wo die offizielle Veröffentlichung nun in greifbare Nähe rückt. Hatte der erste Release Candidate (Angular 5.0.0-rc.0) noch ein paar neue Features an Bord, folgten in den jüngsten beiden RC-Versionen rc.1 und rc.2 lediglich Bugfixes und Verbesserungen der Performance.

Auch Angular 4.4.5, die aktuellste Version in Produktionsreife, bringt sogar ausschließlich eine Handvoll Bugfixes. Der Compiler instanziiert Eager Providers nun korrekt, die in Verbindung mit Injector.get genutzt werden. Dies löst zudem auch das Problem, dass sämtliche Instanzen von NgModule bei der Verwendung von TestBed.overrideProvider lazy werden. Im Kern von Angular verhalten sich übrigens dynamisches und Inline Code Checking gleich.

Achtung! Laut offizieller Roadmap für Angular 5 soll das Update am 23. Oktober erscheinen. Angular 4.4.5 wurde sogar ein paar Tage früher als erwartet veröffentlicht. Ob Angular 5 allerdings zum Stichtag erscheint, bleibt abzuwarten.

Angular 5.0.0-rc.1 / Angular 5.0.0-rc.2

Im Fokus der beiden Release Candidates für Angular 5 standen, wie oben bereits beschrieben, Bugfixes und Performance-Verbesserungen. Letztere betreffen fast ausschließlich den Compiler von Angular, der mit rc.1 standardmäßig keine Zusammenfassungen für jit mehr versendet. Für die inkrementelle Kompilierung werden ab sofort nur noch veränderte TypeScript-Dateien gesendet; erstellt werden allerdings nach wie vor alle generierten Dateien.

Der AST-Code des Animation-Pakets wurde für Angular 5.0.0-rc.2 so umgeschrieben, dass er auf Interfaces und nicht mehr auf Klassen setzt. Da Interfaces während der Laufzeit nicht persistent gemacht werden, können Klassen entfernt werden, was das Bundle animations-browser verkleinert und die allgemeine Performanz erhöht:

Vorher:

animations-browser.umd.js = 222kb
animations-browser.umd.min.js = 107kb

Nachher:

animations-browser.umd.js = 213kb
animations-browser.umd.min.js = 102kb

Alle Informationen zu den neuen Features, den gefixten Bugs und den Verbesserungen in Sachen Performanz gibt es wie immer auf GitHub.

Angular 5.0: Erster Release Candidate läutet Endspurt ein

Nach dem Sommerloch folgt die heiße Herbstphase: Zahlreiche neue Hauptversionen erschienen in den letzten Tagen, darunter Java 9, Java EE 8 und Spring 5. Angular 5 soll am 23. Oktober folgen, den ersten Release Candidate kann man sich bereits jetzt schon ansehen. Die Beta-Phase ist damit offiziell abgeschlossen, Angular 5.0.0-rc.0 bringt dementsprechend vorrangig Bugfixes. Dennoch gibt es auch einige wenige neue Features.

Die inzwischen erschienenen Versionen Angular 4.4.2, Angular 4.4.3 und Angular 4.4.4 hatten insgesamt gerade einmal sieben Fehlerbehebungen im Gepäck. Unter anderem wurden einige Probleme beim Packaging behoben und ein negativer Wert für Query-Limits wird jetzt unterstützt.

Angular 5.0.0-rc.0

Der erste Release Candidate von Angular 5 beinhaltet neben 34 Bugfixes und der Verbesserung der Performance auch fünf neue Features. Wie auch Angular 4.4.4 werden in Angular 5 nun negative Werte für Query-Limits unterstützt, ein API wurde dem Plattform-Server hinzugefügt, das den Status vom Server transferieren kann.

Neu ist auch das @angular/service-worker Package. Zwar existiert der Service Worker (SW) schon eine Weile, wurde aber von Grund auf neu geschrieben, um eine weitere Bandbreite an Anwendungen zu unterstützen. Die folgenden Entrypoints sind ab sofort enthalten:

• @angular/service-worker: Eine Bibliothek, die Angular Client Apps erlaubt, mit dem Service Worker zu kommunizieren.
• @angular/service-worker/gen: Eine Bibliothek für das Erstellen von ngsw.json-Dateien aus glob-bastierten SW-Konfigurationsdateien
• @angular/service-worker/ngsw-worker.js: Das Service Worker Script selbst.
• @angular/service-worker/ngsw-cli.js: Ein CLI-Tool für die Erstellung von ngsw.json-Dateien aus glob-bastierten SW-Konfigurationsdateien.

Der Compiler stand diesmal in Sachen Verbesserung der Performanz im Vordergrund. Um schneller kompilieren zu können, wird tsickle nur noch dann verwendet, wenn es nötig ist. Der Watch Mode sollte nun ebenfalls schneller laufen, das gleiche gilt für die Erstellung von ts.Program. Einen Breaking Change gab es ebenfalls: ngGetContentSelectors() wurde entfernt, stattdessen müssen Nutzer ab Angular 5 auf ComponentFactory.ngContentSelectors zurückgreifen.

Alle Informationen zu den neuen Features, den gefixten Bugs und den Verbesserungen in Sachen Performanz gibt es wie immer auf GitHub.

Angular 5.0: Die Beta-Phase ist eröffnet

Laut Release-Plan auf GitHub werden sowohl die Beta-Versionen von Angular 5 als auch die Release Candidates jeweils gemeinsam mit neuen Bug-Fix-Updates für die aktuelle Framework-Version im 4.x-Release-Zweig erscheinen. Los ging es demnach Mitte Juli mit der Veröffentlichung von Angular 4.3.1 und Angular 5.0.0-beta.0

Angular 5.0.0-beta.0/beta.1

Viele Experten sind sich einig: Angular ist nun an einem Punkt, an dem die nächsten Releases nicht mehr das Killer-Feature bringen, sondern die allgemeine Performanz und die Nutzbarkeit verbessern werden. Das heißt nicht, wie die Beta-Versionen bereits zeigen, dass nur noch Bugs gefixt werden. Es wird allerdings aller Voraussicht nach kein krasser Umbruch mehr stattfinden, wie das zwischen AngularJS 1.x und Angular 2 der Fall war.

Ein neues Feature ist etwa die Unterstützung des Lazy-Loadings von Angular-Modulen in AngularJS-Anwendungen hinein und im Bereich Animationen der Support von den Transition Aliases :increment und :decrement. Für schnelleres Rendering wird zudem in Angular 5 der native addEventListener verwendet. Auch die Umstellung auf die neueste Version von tsickle bringt eine Verbesserung der Performance. Das angular.io-Bundle ist nun 6 Kilobyte leichter, da abstrakte Class-Methods nicht mehr materialisiert werden. Achtung! Da tsickle die Nutzung der Type Annotations @private und @return ausdrücklich verbietet, wurde es nötig, diese zu entfernen.

Neben den neuen Features und Performance-Verbesserungen wurden auch erneut über zwanzig Bugs gefixt. Eine vollständige Liste aller Änderungen und Bugfixes gibt es wie immer im Changelog von Angular auf GitHub.

The Microfrontend Revolution: Using Webpack 5 Module Federation with Angular

by Manfred Steyer

React Workshop: Single Page Applications Powered by React

by Sebastian Springer

Intensiv, nachhaltig & praxisbezogen: Alle Hintergründe zu Building-Blocks in Angular

mit Manfred Steyer (Freiberufler)

Als Online- oder Präsenztraining!

Das 360°-Intensivtraining mit Angular-Koryphäe Manfred Steyer
Präsentiert von Entwickler Akademie

Angular 5.0.0-beta.2/beta.3 [Update vom 11.08.17]

Die Beta-Phase für Angular 5 geht in die zweite Runde. Gleich zwei neue Beta-Versionen wurden in den letzten zehn Tagen veröffentlicht. An Bord sind Bugfixes, neue Features, Performance-Verbesserungen und diesmal auch ein Breaking Change. Dass der Fokus bei Angular derzeit auf dem kommenden Major Release liegt, sieht man daran, dass für die aktuelle Version, Angular 4.3.3 lediglich ein Bug im Compiler gefixt wurde.

Die dritte Beta-Version von Angular 5 (5.0.0-beta.2) hat zwei neue Features ins Web-Framework eingeführt. Für die Aktivierung des Event-Trackings individueller Routes wurden die Klassen ChildActivationStart und ChildActivationEnd sowie ein Test für die Verifizierung der PreActivation-Phase des Routings hinzugefügt. Zudem ist es nun möglich, FormControls, FormGroups und FormArrays mit einem zweiten Parameter in Form eines Options-Objektes auszuzeichnen.

Seit der vierten Beta-Version wird in Angular StaticInjector anstatt ReflectiveInjector genutzt, letzterer wird in einem der kommenden Updates komplett entfernt werden. Wer die Funktionalität benötigt, wird dazu angehalten, stattdessen Injector.create zu nutzen. Das Ganze führt zu einem Breaking Change, denn platformXXXX() akzeptiert keine Provider mehr, die von Reflexionen abhängig sind. Achtung! Das gilt lediglich im Bereich der Platform Creation und für Provider des JIT-Compilers, nicht für @Component oder @NgModule.

Alle Informationen zu den neuen Features und den 14 gefixten Bugs findet man wie immer im Changelog von Angular auf GitHub.

Angular 5.0.0-beta.4 / Angular 5.0.0-beta.5 [Update vom 30.08.17]

Langsam aber sicher nähert sich Angular 5 der Vollendung. Die offizielle Roadmap für die neue Version des Frameworks sieht – wie eingangs erwähnt – eine Veröffentlichung am 18. September vor. Dieses Datum ist allerdings mit einiger Vorsicht zu betrachten, denn gerade wurde mit Angular 5.0.0-beta.5 eine nicht vorgesehene Betaversion veröffentlicht – laut Release Schedule sollte vergangenen Montag eigentlich bereits der zweite Release Candidate verfügbar sein.

Wie bereits in Angular 4.3.3 wurden in den Updates 4.3.4, 4.3.5 und 4.3.6 vorrangig Bugs gefixt, insgesamt 15 Fehler konnten vom Team behoben werden. Unter anderem wird nun der PWA-Test übersprungen, wenn man einen nicht öffentlichen Commit redeployt und der Compiler kompiliert sauber mit TypeScript 2.4, Letzteres gilt auch für Benchpress. Angular 4.3.5 brachte zudem ein Update für den Build Optimizer, was die Performance ein wenig anheben sollte und ab Version 4.3.6 kann man das neue leere Modul DeprecatedI18NPipesModule verwenden.

Die fünfte Betaversion von Angular 5 (beta.4) brachte vor etwa zwei Wochen bereits die Unterstützung von updateON für ngModelOptions und die Status-Methode für AbstractControlDirective. Die Möglichkeit, leere Text-Nodes aus kompilierten Templates zu entfernen, soll die Performanz steigern. Gleiches gilt für das Entfernen der Decorator DSL, für deren Verwendung Reflect benötigt wird.

Code Refactoring in Angular 5.0.0-beta.5

Für Angular 5.0.0-beta.5 gab es ein großes Code-Refactoring mit einer bedeutenden Änderung: Der Compiler wurde aus dem Kern Angulars herausgelöst. Das heißt, dass ab sofort weder @angular/compiler noch @angular/compiler-cli abhängig vom @angular/core sind. Einige Interfaces sind daher nun doppelt und @angular/platform-server ist nun zusätzlich von @angular/platform-browser-dynamic abhängig.

Das große Refactoring sorgte zudem für die Entfernung einiger veralteter Objekte und Direktiven. Dies wurde entfernt:

• NgFor
• NgTemplateOutlet#ngOutletContext
• useDebug
• ChangeDetectionRef (ein Parameter von DifferFactory#create
• DebugNode#source
• Testability#findBindings
• TrackByFn
• Verschiedene Parameter von ErrorHandler
• NgProbeToken
• PRIMITIVE
• Verschiedene Optionen von initialNavigation
• Verschiedene Properties von RouterOutlet

Neue Features

Im Bereich der Animationen funktioniert die Property @.disabled jetzt auch ohne Expressions und es gibt Fehlermeldungen, wenn ungültige CSS-Properties entdeckt werden. Die Direktive NgForm erhält mit ngFormOptions eine neue Input-Property. Mit dieser können Nutzer updateOn-Werte für alle Subkontrollen von Form einstellen, die nur dann nicht gelten, wenn für die Subkontrolle bereits explizit ein eigener updateOn-Wert in ngModelOptions eingestellt wurde.

Ab Angular 5 wird das Intl-API nicht mehr verwendet, was dem Zweck dient, den Browser-Support zu verbessern. Der Compiler erlaubt nun die Verwendung mehrerer exportAs-Namen, .ngsummary.json-Dateien sind portierbar und TypeScript wird ab sofort für das Auflösen von Ressourcenpfaden verwendet.

Breaking Changes

Wie oben erwähnt wird das Intl-API nicht mehr verwendet, da es zu zahlreichen Bugs und Unstimmigkeiten kam. Stattdessen werden nun Daten genutzt, die vom Unicode Common Locale Data Repository (CLDR) exportiert werden. Außerdem war es nötig die I18n-Pipes zu ändern, sodass an dieser Stelle einige Breaking Changes zu erwarten sind. Eine vollständige Liste mit Breaking Changes gibt es auf im Changelog.

Alle Informationen zu den neuen Features, den gefixten Bugs und den Verbesserungen in Sachen Performanz gibt es wie immer auf GitHub.

Angular 5.0.0.-beta.7: Neue Router-Events und TypeScript 2.4 [Update vom 18.09.17]

Aller Wahrscheinlichkeit nach wird Angular 5 am 23. Oktober erscheinen, das legt jedenfalls die vor vier Tagen aktualisierte Roadmap nahe. Die Betaphase hingegen geht mit Angular 5.0.0-beta.7 in die achte Runde und bringt einige Bugfixes, kleinere Feature-Erweiterungen und zwei Breaking Changes. Auch ein Code Refactoring ist erneut Teil der neuen Beta.

Unterdessen erschien auch die aktuelle Version 4.4.1, die ebenfalls einige Bugfixes und neue Features enthält. Der Compiler erlaubt ab sofort die Spezifizierung mehrerer exportAs-Namen für eine Direktive, die über Kommas getrennt innerhalb des Strings angegeben werden können. Nutzer können zudem ab Angular 4.4.1 leere Text-Nodes aus bereits kompilierten Templates entfernen. Da es Probleme mit der Veröffentlichung von Version 4.4.0 gab, sprang man lieber gleich auf die nächste.

Angular 5.0.0-beta.7

Erwartungsgemäß mager fällt die neueste Betaversion von Angular aus, gerade einmal drei neue Features wurden implementiert. Nimmt man allerdings alle acht Betas zusammen, kommt man auf 33 neue und verbesserte Features, was dann doch insgesamt wieder eine recht große Verbesserung der Funktionsvielfalt darstellt. Über 80 Bugs wurden bislang in der Betaphase gefixt, was ebenfalls eine nicht gerade geringe Anzahl an Schräubchen darstellt, an denen gedreht worden ist.

Die achte Beta von Angular 5 bringt neue Events auf den Router, ab sofort sind ActivationStart und ActivationEnd verfügbar. Zudem ersetzt ng-container die i18n-Kommentare, deren Verwaltung eine Menge Arbeit bedeutete. Im Bereich Platform-Server wurde ein Multi-RENDER_MODULE_HOOK-hinzugefügt. Dieser kann vom Statustransfermodul genutzt werden, um jedweden Serverstatus zu serialisieren, der zum Client transportiert werden muss. Das Ganze läuft exakt ab, bevor der aktuelle Plattformstatus zu einem String gerendert wird.

In Sachen Code Refactoring wurden die Eigenschaften von RouterOutlet endgültig entfernt und das Update auf TypeScript 2.4 wurde initiiert. Diese beiden Refactorings führen auch zu den Breaking Changes der aktuellen Betaversion: Der Angular Compiler benötigt ab Angular 5.0.0-beta.7 TypeScript 2.4.x und durch die Entfernung der RouterOutlet-Eigenschaften könnten bei manchen Nutzern Probleme auftreten – passen Sie also auf!

Alle Informationen zu den neuen Features, den gefixten Bugs und den Verbesserungen in Sachen Performanz gibt es wie immer auf GitHub.