Kleiner und schneller

Angular 4 ist da – das ist neu

Dominik Mohilo

© angular.io (modifiziert)

Angular 4 ist erschienen. Wie versprochen kam das Release dann doch noch pünktlich am 23. März – zumindest in der Zeitzone der Angular-Entwickler. Wir fassen die Highlights zusammen.

Release von Angular 4

Angular 4 ist abwärtskompatibel zu 2.x.x. und unterstützt jetzt TypeScript 2.1 und 2.2. Das beschleunigt ngc und verbessert das Typechecking. Wenn in einem Template ein Fehler auftaucht, wird eine Source Map generiert, die Kontext zum Original-Template liefert. Das sind aber nur die kleineren Änderungen. Die großen haben wir noch einmal übersichtlich zusammengefasst. Hauptziel war es, Angular kleiner und schneller zu machen. Wer direkt loslegen möchte, findet im Angular Update Guide Starthilfe.

View Engine

Eines der Haupt-Features der neuen Angular-Version ist die verbesserte und optimierte View Engine. Die Änderungen können in den meisten Fällen dazu führen, dass die Größe von generiertem Code bis zu 60 Prozent kleiner ist. Weitere Informationen zur neuen View Engine gibt es im Design Doc.

Animation Package

Animationen sind nicht länger Teil von @angular/core, sondern ein eigenes Package. Wer also keine Animationen nutzt, bekommt den für ihn unnötigen Code nicht mehr mitgeliefert. Die Änderung vereinfacht es auch, die passende Dokumentation zu finden und verbessert Autocomplete. Animationen lassen sich zum Haupt-NgModule über BrowserAnimationsModule von @angular/platform-browser/animations hinzufügen.

Verbesserte *ngIf and *ngFor

Die Template-Binding-Syntax bringt einige hilfreiche Änderungen. Entwickler können jetzt if/else-Syntax nutzen und lokale Variablen zuweisen. Hier ein Beispiel:

<div *ngIf="userList | async as users; else loading">
  <user-profile *ngFor="let user of users; count as count" [user]="user">
  </user-profile>
 <div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>

Angular Universal

Universal, das Projekt, dass Entwicklern erlaubt Anuglar auf einem Server laufen zu lassen, ist jetzt wieder up-to-date mit Angular. Der Release ist der erste seit dem Community-getriebenen Original-Release. Der Universal-Code findet sich hauptsächlich in @angular/platform-server. Mehr dazu findet sich in der neuen renderModuleFactory-Methode und in einem Demo-Repository.

Achtung bei strictNullChecks

Eines der Ziele von Angular 4 war es, ds Framework kompatble zu Typescripts strictNullChecks-Setting zu machen. Während der RC-Phase wurde jedoch klar, dass noch viel Arbeit nötig ist, um diese Funktion ordentlich zu integrieren. Deswegen ist die Version 4 absichtlich inkompatibel zu strictNullChecks-Setting, um das Probleme mit bestehende Applikationen zu vermeiden. Mit Version 4.1 soll die Unterstützung aber kommen.

Alle neuen Features in Angular 4 sowie Tipps zur Migration auf die neue Version werden ausführlich im folgenden Artikel beschrieben:

Angular 4 – das Update: Diese Features müssen Sie kennen



Update vom 23.03.2017

Angular 4.0.0-rc.6

Nach dem Release Candidate 5 gab es jetzt doch noch eine Nummer 6. Trotzdem gehen die Entwickler im Angular-Team weiter davon aus, dass heute am 23. März der Finale Build von Angular 4 noch erscheinen soll, wie ein Tweet von Igor Minar verspricht.


Im RC 6 wurden insgesamt 29 als Bug Fixes markierte Issues gelöst. Auch fünf neue Features kamen hinzu. So werden jetzt inputs, outputs und ngContentSelectors auf ComponentFactory exponiert. Es ist jetzt möglich ComponentFactory.inputs/outputs/ngContentSelectors zu nutzen. Außerdem wurden ParamMap.keys hinzugefügt, um eine Liste von Parametern zu bekommen. Mit ParamMap ist es möglich auf die Parameter zuzugreifen. Zum Changelog geht es hier lang.



Update vom 20.03.2017

Angular 4.0.0-rc.5

In der Roadmap zu Angular 4 war der fünfte Release Candidate eigentlich nicht geplant, jedenfalls nicht unter diesem Namen. Da allerdings Angular 4.0.0-rc.0 direkt durch Version 4.0.0-rc.1 ersetzt wurde, ist der fünfte Releasekandidat zu Angular 4 doch irgendwie vorgesehen gewesen – so viel zur Ehrenrettung der Entwickler. Übermorgen soll dann schließlich die GA-Version des Web-Frameworks erscheinen, an dem das Team seit letztem Jahr fleißig arbeitet.

Achtung! Damit Angular 4 möglichst ohne größere Bugs veröffentlicht werden kann, bittet das Team die Community darum, Angular 4 auf Herz und Nieren zu prüfen und Feedback zu geben.

Teil des fünften und damit nun aller Voraussicht nach wirklich letzten Release Candidates war lediglich ein einziger Bugfix. Behoben wurde ein Problem im Compiler-CLI: @angular/compiler-cli verwies auf eine veraltete Version von @angular/tsc-wrapped. Mit der aktuellen Version sollte dieser Verweis nun aktuell sein.

Weitere Informationen zu den aktuellen Änderungen und den Bugfixes gibt es wie immer im Changelog auf GitHub.



Update vom 17.03.2017

Angular 4.0.0-rc.4

Nun ist er da, der voraussichtlich letzte Release Candidate von Angular 4. Ungewöhnlich ist dabei, dass das Team von Angular sich entschieden hat, nicht nur eine große Anzahl von Bugs zu fixen. Stattdessen wurden in Angular 4.0.0-rc.4 auch neue Features hinzugefügt; ein kleines Code Refactoring ist ebenfalls Teil des RCs. Ob dies die für nächste Woche geplante Veröffentlichung von Angular 4 beeinträchtigt, bleibt abzuwarten.

Achtung! Damit Angular 4 möglichst ohne größere Bugs veröffentlicht werden kann, bittet das Team die Community darum, Angular 4 auf Herz und Nieren zu prüfen und Feedback zu geben.

In Sachen Features wird nun unter anderem as in Template-Bindings unterstützt. Aus der Codezeile *ngIf="exp; let var1 = ngIf" wird in Angular 4 somit etwa schlicht *ngIf="exp as var1". Im Angular-Core werden nun inputs, outputs und ngContentSelectors in der ComponentFactory offengelegt. Außerdem können nun mehrere Testmodule standardmäßig zur Verfügung gestellt werden.

In Templates ist ab Version 4 von Angular auch die Nutzung von Source Maps möglich. Dies hilft dabei, Fehlern einen sinnvollen Kontext im Hinblick auf die Quelle zu geben. Zukünftig werden sämtliche Fehler, die in Templates vorkommen, vom nächsten Element aus geloggt. Fehlernachrichten und Stacks werden auch nicht mehr separat voneinander geloggt, sondern es wird der tatsächliche Fehler geloggt.

Das oben erwähnte Code Refactoring bezieht sich auf Renderer2.setStyle. An dieser Stelle werden ab dem neuesten Releasekandidaten Flags anstelle von Booleans genutzt. Dies ist ein Breaking Change, den es bei der Verwendung von Angular 4.0.0-rc.4 zu beachten gilt. Eine weitere zu beachtende Änderung ist die Tatsache, dass DebugNode.source nicht mehr die Source Location eines Nodes zurückgibt.

Weitere Informationen zu den aktuellen Änderungen und den Bugfixes gibt es wie immer im Changelog auf GitHub.



Update vom 13.03.2017

Angular 4.0.0-rc.3

Das Team von Angular setzt zum Endspurt an: Mit dem dritten Release Candidate erschien nun die (voraussichtlich) vorletzte Testiteration des Web-Frameworks. Wie die anderen RC-Versionen enthielt auch Angular 4.0.0-rc.3 keine neuen Features, wohl aber einige Bugfixes und Breaking Changes.

Achtung! Damit Angular 4 möglichst ohne größere Bugs veröffentlicht werden kann, bittet das Team die Community darum, Angular 4 auf Herz und Nieren zu prüfen und Feedback zu geben.

Zwei der Bugfixes betreffen den Compiler. So sollte die AOT-Kompilierung nun auch funktionieren, wenn ein Template in einer Zuweisung ein leeres Array enthält. Außerdem wurde die Fehlermeldung verbessert, die Angular 4 ausgibt, wenn ein Modul sich selbst importiert. Im Bereich des Routers kann man nun den Bootstrap so einstellen, dass gewartet wird, bis alle Routes ermittelt sind.

Der Kompilier- und Linking-Prozess für Angular 4 wurde dem von AngularJS angepasst. Bislang war es so, dass der Prozess wie folgt ablief:

  1. Kompilierung des Templates
  2. Instanziierung des Controllers
  3. Hook: $onChanges
  4. Hook: $onInit
  5. Hook: $doCheck
  6. Pre-Linking
  7. Sammeln von Content Children
  8. Einfügen des kompilierten Templates
  9. Linking
  10. Post-Linking
  11. Hook: $postLink

Damit die Component View bereits befüllt ist, wenn der Controller instanziiert und die darauf folgenden Hooks aufgerufen werden, ist der Kompilierungsprozess aktualisiert worden. Der Ablauf stellt sich nun wie folgt dar:

  1. Sammeln von Content Children
  2. Einfügen des Templates
  3. Kompilierung des Templates
  4. Instanziierung des Controllers
  5. Hook: $onChanges
  6. Hook: $onInit
  7. Hook: $doCheck
  8. Pre-Linking
  9. Linking
  10. Post-Linking
  11. Hook: $postLink

Dies hat den Vorteil, dass das Template bereits im korrekten DOM-Kontext kompiliert wird. Zuvor wurde es in Isolation innerhalb eines Dummy-Elements kompiliert.

Für Breaking Changes sorgten seit dem ersten Release Candidate von Angular 4 die folgenden Umbenennungen:

  • RendererV2 in Renderer2
  • RendererTypeV2 in RendererType2
  • RendererFactoryV2 in RendererFactory2

Weitere Informationen zu den aktuellen Änderungen gibt es wie immer im Changelog auf GitHub.



Update vom 03.03.2017

Angular 4.0.0-rc.2

Wie bereits angekündigt, bringt der aktuellste Release Candidate von Angular 4 keine neuen Features mehr. Stattdessen beschäftigt sich das Entwicklerteam in erster Linie mit Bugfixes und mit Verbesserungen im Bereich der Performance. Es soll ja schließlich am 22. März, zur Veröffentlichung von Angular 4, alles glatt laufen.

Achtung! Damit Angular 4 möglichst ohne größere Bugs veröffentlicht werden kann, bittet das Team die Community darum, Angular 4 auf Herz und Nieren zu prüfen und Feedback zu geben.

Im Bereich Performance hat man sich nun, da die neue View Engine eingeführt wurde, den veralteten Code für den Compiler, den Platform-Browser, die vorige View-Engine-Version usw. zu entfernen. Das Ziel ist, die Größe von App-Bundles zu reduzieren. Und da viele der derzeit aktuellen Tools es nicht schaffen, den toten Code ordentlich zu tree-shaken (also auszusieben), wurde er entfernt. Im Compiler werden zudem ab sofort die Identifier für generierten Code kleiner gehalten.

Das Team hat für den zweiten Releasekandidaten zehn Bugs in den verschiedensten Bereichen von Angular 4 gefixt. Animationen etwa sollten beim Ahead-of-Time-Kompilieren nun funktionieren und im Compiler wurden die Identifier-Namen von EMPTY_MAP und EMPTY_ARRAY angepasst. Außerdem sollten Bindings auf Elemente nun vor Host Bindings angewandt werden.

Weitere Informationen zu den aktuellen Änderungen gibt es wie immer im Changelog auf GitHub.



Update vom 27.02.2017

Angular 4.0.0-rc.1

Mitte Dezember letzten Jahres kündigte das Team von Angular an, dass die auf Angular 2 folgende Version nicht, wie erwartet, Angular 3 sein würde. Im Sinne des Semantic Versioning würde man gleich auf Angular 4 springen. Rund zehn Wochen und neun Beta-Versionen später ist nun der erste Releasekandidat der neuen Angular-Version verfügbar.

Wie man der Ankündigung vom Dezember entnehmen kann, war die GA-Version von Angular 4 bereits für den 1. März geplant. Der Roadmap auf GitHub und den Release Notes von Angular 4.0.0-rc.1 ist zu entnehmen, dass das neue Datum für die finale Veröffentlichung nun der 22. März 2017.

Achtung! Damit Angular 4 möglichst ohne größere Bugs veröffentlicht werden kann, bittet das Team die Community darum, Angular 4 auf Herz und Nieren zu prüfen und Feedback zu geben. Bugfixes und eine aktualisierte Dokumentation werden den Hauptanteil für die noch kommenden drei RC-Versionen bilden, denn Angular 4.0.0-rc.1 ist bereits Feature complete.

Angular 4: Die Features

Optimierte View Engine & ngIf-Syntax

Eines der Hauptfeatures der neuen Angular-Version ist die verbesserte und optimierte View Engine. Es wurde vor allem darauf Wert gelegt, die Größe des generierten Codes zu reduzieren. Dies gelang den Entwicklern so gut, dass in manchen Fällen zukünftig mehr als die Hälfte eingespart werden kann. Weitere Informationen zur neuen View Engine gibt es im extra dafür angefertigten Design Doc.

Die *ngIf-Syntax hat ebenfalls einige Verbesserungen erfahren. So kann nun unter anderem eine Syntax im Stil von if/else genutzt und lokale Variablen zugewiesen werden. Ein Beispiel:











&lt;div #loading&gt;Loading...&lt;/div&gt;


&lt;div *ngIf="userObservable | async; else loading; let user"&gt;
  {{ user.name }}
&lt;/div&gt;










TypeScript 2.1 & Universal

Das Update auf TypeScript 2.1 soll, genau wie die Umstellung des TS-Compilers auf ES2015, für eine bessere Performance sorgen; Angular ist zudem nun fit für die StrictNullChecks von TypeScript. Für die Nutzung des Releasekandidaten ist Version 2.1.6 von TypeScript notwendig. Ob die Unterstützung des neuen TypeScript 2.2 Teil der finalen Version sein wird, blieb zunächst unklar.

Unter dem Namen Universal hat Google ein Tool entwickelt, das es Entwicklern möglich macht, Angular auf einem Server laufen zu lassen. Dieses Werkzeug wurde nun vom Angular-Team in den Platform-Server eingefügt. Für dieses Feature wird derzeit an einer umfassenderen Dokumentation gearbeitet, auf der Homepage des Projektes und auf GitHub kann man sich aber bereits eingängig mit Universal befassen.

Ausblick

Natürlich ist der Release Candidate noch nicht perfekt. Wie oben bereits angesprochen, wird die Dokumentation bis zum finalen Release noch deutlich überarbeitet werden. Auch die fehlenden Source Maps in den npm-Paketen sind ein Thema, das in den nächsten RCs behandelt werden soll. Nutzer müssen sich darauf gefasst machen, dass während der RC-Phase Bundles teilweise größer ausfallen können, da das Team an neuen Codepfaden und am Entfernen der alten arbeitet.

Wie immer ist eine Rückwärtskompatibilität ein festes Versprechen, sodass Änderungen am Kern-Framework und -Tooling nicht das existierende Komponentenökosystem und vorhandene Anwendungen unbrauchbar machen. Das gilt auch für Angular 5, das im September bzw. Oktober dieses Jahres erwartet wird sowie für Angular 6 im darauffolgenden März.

Übrigens: Ursprünglich sollte die erste RC-Version Angular 4.0.0-rc.0 heißen. Da allerdings ein Bugfix im npm-Release nicht enthalten war, wurde gleich nach der Korrektur Angular 4.0.0-rc.1 veröffentlicht. Mit den Worten des Angular-Teams: oops 🙂

Weitere Informationen zu den aktuellen Änderungen gibt es wie immer im Changelog auf GitHub.



Update vom 20.02.2017

Angular 4.0.0-beta.7/8

Am 13. Dezember letzten Jahres war die vorsichtige Planung des Angular-Entwicklerteams ziemlich straff festgelegt: Wöchentliche Betaversionen, drei Release Candidates und die anschließende Veröffentlichung von Angular 4 pünktlich am 1. März. Laut ursprünglichem Plan sollte diese Woche bereits der letzte Release-Kandidat der Öffentlichkeit zugänglich gemacht werden, doch ganz so glatt, wie man sich erhofft hatte, läuft es offenbar nicht. Nachdem vor rund zwei Wochen die achte Betaversion erschien (beta.7), folgte am vergangenen Wochenende die neunte Beta (beta.8). Ob Angular 4 schließlich im März erscheinen wird, bleibt also zunächst unklar.

Die beiden jüngsten Testversionen bringen, neben den obligatorischen Bugfixes, einige neue Features und Performance-Verbesserungen. Im Fokus der beta.8-Version standen Verbesserungen am Compiler, in Angular 4.0.0-beta.7 ging es insbesondere um die TypeScript-Unterstützung.

Breaking Changes

Das Wichtigste für TypeScript-Nutzer vorweg: Angular 4 wird aller Voraussicht nach ausschließlich TypeScript 2.1 unterstützen. Diese Ankündigung, die mit der Veröffentlichung von Angular 4.0.0-beta.7 einherging, beinhaltete außerdem die Information, dass TypeScript 1.8 nicht mehr unterstützt wird. Auch die Rückwärtskompatibilität zur älteren TypeScript-Version wird, so das Angular-Entwicklerteam, nicht zur Verfügung gestellt.

Die neunte Betaversion von Angular 4 brachte ebenfalls einen Breaking Change: Es könnte sein, dass Klassen, die von AsyncPipe abstammen und transform() überschreiben, nicht richtig kompiliert werden. Unberührt hiervon ist allerdings die Nutzung der asyncPipe in Templates. Dieser Breaking Change geht auf das neue Feature zurück, das die Nutzung von AsyncPipe.transform() für das Ableiten des Types vom Result eines Events, Promises oder Observables erlaubt.

Features & Bugfixes

Die jüngste Angular-Beta brachte vor allem für den Compiler einige neue Features. Unter anderem wird das Erstellen einer Source Map jetzt unterstützt und die Style-Kapselung wurde in die neue View Engine implementiert. Letzteres beinhaltet auch ein Refactoring: Der RendererV2 ist in die RendererFactoryV2 und den RendererV2 aufgeteilt worden. Zudem ist der DebugRendererV2 seit dem Update eine private Klasse in @angular/code.

Die neue View Engine wurde in der aktuellen Version zudem in den Compiler integriert, was ebenfalls ein Refactoring nach sich zog. Ab sofort können zum Beispiel Nummern als Query-ID genutzt werden, der bloom-Filter kann für die Aggregation von passenden Queries in verschachtelten Elementen genutzt werden und statische Queries wurden von dynamischen getrennt.

Für den Ahead-of-Time-Compiler wurden die Error-Nachrichten verbessert. Sie geben den Stack Trace nun nicht mehr aus, wenn die Komponente nicht im Modul deklariert ist. Auch die Fehlermeldungen für unbekannte Elemente und Properties wurden überarbeitet. Zusätzlich gibt es nun eine ordentliche Fehlernachricht, wenn eine non-component der Bootstrap-Liste eines Moduls hinzugefügt wird.

Schließlich und endlich werden alle $doCheck()Watcher abgemeldet, wenn die upgegradete Komponente zerstört wird, wodurch eine Verbesserung der Performance erzielt wird.



Update vom 7.02.2017

Angular 4.0.0-beta.6

Auch mit der siebten Betaversion haben es neue Features und Verbesserungen in Angular 4 geschafft. Außerdem heißt es auch wieder Obacht vor Breaking Changes.

Features

15 neue Features listen die Entwickler für die 4.0.0-beta.6 von Angular 2 auf. Darunter die Möglichkeit Typen-Parameter für generische Typenbezeichnungen zu generieren. Gefixt ist auch ein Problem mit Kompilierfehlern bei fehlenden Übersetzungen. Mit MissingTranslationStrategy lässt sich nun das Verhalten des Compilers anpassen. Der Standardwert bleibt aber weiterhin, dass bei fehlenden Übersetzungen die Anwendung nicht erreichbar ist (MissingTranslationStrategy.Error). Die beiden anderen Varianten sehen vor, die Fehlermeldungen an die Konsole zu schicken oder sie zu ignorieren (MissingTranslationStrategy.Warning und MissingTranslationStrategy.Ignore). Um die Dateigröße zu verringern, kommen jetzt wo möglich abstract-Keywords zum Einsatz. Und weil bestimmte Dart-spezifische Dependencies nicht mehr nötig sind, ist ReflectiveInjector jetzt schlanker.

Breaking Changes

Drei Breaking Changes bringt die 6er Beta mit. Eine Definition von Iterable<T> ist nun zwingend notwendig, um Angular-Anwendungen korrekt zu kompilieren. Iterable<T> muss zur Runtime nicht unterstützt werden aber eine Typendefinition muss vorhanden sein. NgFor und NgFor<T> unterstützen bereits Iterable<T> zur Laufzeit. Die Änderung trägt dieser Tatsache Rechnung. Zweitens: Bei der Migration ist es außerdem nötig, es2015.iterable.ts zum tsconfig.json-libs-Feld hinzuzufügen. Änderung Nummer drei betrifft downgradeInjectable. Bisher hat upgrade/static/downgradeInjectable ein Array in der folgenden Form zurückgegeben:

['dep1', 'dep2', ..., function factory(dep1, dep2, ...) { ... }]

Nun gibt es eine Funktion mit einer $inject-Property zurück:

factory.$inject = ['dep1', 'dep2', ...];
function factory(dep1, dep2, ...) { ... }

Diese Änderung sollte das Verhalten der Anwendung nicht beeinflussen, weil beide Varianten gleichermaßen dafür geeignet sind Injectable Services zu registrieren. Aber es ist möglich, dass der Typen-Check scheitert oder das Code nicht mehr funktioniert, wenn er darauf aufbaut, dass der zurückgegebene Wert ein Array ist.

Die kompletten Bugfixes und Änderungen finden sich in den Release Notes.



Angular 4.0.0-beta.5

In fünf Wochen wird, sofern das Team von Angular den Release-Plan einhalten kann, Angular 4 erscheinen. Derzeit befindet sich die aktuelle Version des Frameworks allerdings noch in der Testphase, genauer: der Beta-Testphase. Mit der gerade erschienenen sechsten Betaversion (beta.5) wurden 11 Bugs gefixt und einige neue Features implementiert, außerdem warnen die Entwickler vor einem Breaking Change im Angular-Kern.

Bugfixes

Was die Bugfixes angeht wurde der Fehler in Firefox 31 behoben, bei dem die RegExp einen Syntax-Fehler ausgegeben hat. Firefox, so das Angular-Team, interpretierte offenbar einen Bindestrich falsch. Ein weiterer Fix im Bereich des Compilers: Die Namen von Platzhaltern in XMB/XTB können ab sofort lediglich A-Z, 0-9 und _n enthalten.

Für NgPlural werden nun auch numerische Werte als Discrete Cases unterstützt und die Animation-Classes, die für die Implementierung des Renderer gebraucht werden, werden ab der beta.5 von Angular 4 exportiert. Auch das Problem der nicht deklarierten Variable name in der View Engine wurde behoben.

Features

Im Kern von Angular 4 wurde eine neue View Engine implementiert. Diese erlaubt es dem Codegen, weniger Code zu generieren. Dies kommt durch die Möglichkeit des Codegens, während der Laufzeit View-Definitionen zu interpretieren. Derzeit kann man bereits einen Tree-Benchmark implementieren, der auf der neuen Engine basiert, es gilt allerdings zu beachten, dass die sie noch nicht alle geplanten Features beinhaltet. Zudem wurde die Unterstützung für Pure Expression zur neuen View Engine hinzugefügt.

Weitere neue Features sind unter anderem die Unterstützung von ng-model in degradierten Komponenten und von calc– bzw. gradient-Funktionen. Es ist zudem ab beta.5 möglich, eine ES2015-Distribution zu builden.

Breaking Changes

Da injector.get() jetzt parametrisiert ist, kann es zu Ausfällen kommen, etwa beim Injizieren von Foo mit der Konfiguration {provide: Foo, useClass: MockFoo}. Die Injektionsinstanz wäre die von MockFoo, aber der Typ ist in diesem Fall Foo anstelle von any, wie es zuvor war. Das bedeutet, es war möglich eine Methode auf MockFoo zu callen, die nun aber nicht den Typecheck bestehen würde. Die Macher von Angular 4 geben den Nutzern dazu folgendes Beispiel an die Hand:

class Foo {}
class MockFoo extends Foo {
  setupMock();
}

var PROVIDERS = [
  {provide: Foo, useClass: MockFoo}
];

...

function myTest(injector: Injector) {
  var foo = injector.get(Foo);
  // This line used to work since `foo` used to be `any` before this
  // change, it will now be `Foo`, and `Foo` does not have `setUpMock()`.
  // The fix is to downcast: `injector.get(Foo) as MockFoo`.
  foo.setUpMock();
}

Alle Informationen zu den aktuellen Bugfixes, Features und Breaking Changes gibt es, wie immer, auf der GitHub-Seite von Angular. Die nächste Betaversion wird aller Voraussicht nach kommende Woche erscheinen, der erste Release Candidate in der Woche darauf.



Angular 4: Beta

Die Beta-Phase von Angular 4 hat offiziell begonnen. Mit der ersten Version, die am 15. Dezember veröffentlicht wurde, hat das Framework aus dem Hause Google den jüngsten Release-Zyklus gestartet. Der erste Release Candidate wird am 8. Februar erwartet. Auch das offizielle Datum, zu dem Angular 4 veröffentlicht werden soll, ist bereits bekannt: Am 1. März 2017, so die Planung, wird das neue Major-Release fertig sein.

Neue Features (beta.0 – beta.4)

Die ersten Betaversionen von Angular 4 brachten 26 Bugfixes und 23 neue Features sowie einige Upgrades und Deprecations. Wichtig ist aber auch, dass in diesen Vorabversionen die Änderungen aus den aktuellen Releases von Angular 2 enthalten sind. Fest eingeplant für Angular 4 sind Features wie TypeScript 2.2, Abwärtskompatibilität zu Angular 2 und eine verbesserte Deprecation Policy, die problemlose Updates sicherstellen soll.

Für Angular 4.0.0-beta.0 wurde die ngIf-Syntax erweitert, sodass der else-Teil nun das Template anzeigen kann, wenn die Bedingung false ist. Die Bedingung kann jetzt auch in einer lokalen Variable für den späteren Gebrauch gespeichert werden. Angular 4.0.0-beta.1 brachte die Unterstützung für den Lifecycle Hook $doCheck() in der UpgradeComponent.
angular6
In der dritten Betaversion (beta.2) wurde ein Refactoring am Compiler vorgenommen, um die Code-Generierung beim Binding an DOM-Elemente zu verringern. Im von Google bereitgestellten Beispiel konnte so der Quelltext um etwa die Hälfte reduziert werden. Seit der vierten Betaversion (beta.3) wird unter anderem das TS2.2 Plug-in Model unterstützt. Außerdem wurden einige Bestandteile von Angular als überholt markiert, etwa ngOutletContext. An dessen Stelle soll man von nun an ngTemplateOutletContext verwenden, CollectionChangeRecord wurde hingegen in IterableChangeRecord umbenannt.

In der aktuellsten Version, Angular 4.0.0-beta.4, wurde eine parametrisierte und typsichere Version vom OpaqueToken eingeführt. Die neue Version trägt den Namen InjectionToken<T>. Als Injection Tokens werden zukünftig nur noch Type<?> und InjectionToken<?> unterstützt.

Auf der GitHub-Seite von Angular gibt es eine komplette Änderungsübersicht. Fachartikel, spannende Interviews und Experten-Tipps rund um das JavaScript-/TypeScript-Framework finden Sie in unserem Themen-Dossier zu Angular 2.

Hintergrund

Mit Angular 2 haben die Macher des beliebten JavaScript-Frameworks die 2009 erstmals veröffentlichte Technologie auf eine neue Stufe gehoben. Funktionen wie Auto-Completion, Go-To-Definition und andere IDE-Funktionen konnten durch den Umstieg auf TypeScript als Entwicklungssprache dem Open-Source-Framework hinzugefügt werden. Von anderen Dingen trennte man sich bei der Entwicklung von Angular 2, etwa von AtScript, einer eigens von Google für das Framework entwickelten Programmiersprache.

Das finale Release von Angular 2 fand im September letzten Jahres statt, und wir begleiteten den Weg dorthin redaktionell seit der Veröffentlichung des ersten Release-Kandidaten am 3. Mai. Exakt neun Monate nach Beginn der Beta-Phase war es dann soweit: Angular 2 wurde mit hunderten Features und Bugfixes veröffentlicht.

Angular 4

Natürlich war mit der Veröffentlichung von Angular 2 ein Meilenstein erreicht – allerdings nicht das Ende der Fahnenstange. Die Arbeiten an dem Framework wurden und werden auch in Zukunft fortgesetzt, ein sehr stringenter Release-Plan verspricht neue „große“ Versionen alle sechs Monate, dazwischen drei Minor-Releases und ein wöchentliches Update mit Patches für die aktuellen Versionen.

Warum die nächste Version den Namen Angular 4 tragen wird und nicht Angular 3? Daran ist der Router schuld. Wie unsere Berichterstattung über die Entwicklung von Angular 2 gezeigt hat, hatte der Angular Router bereits für das aktuelle Major-Release die Versionsnummer 3.0.0. Um dieser Diskrepanz in den Versionsnummern des Frameworks selbst und dem Router Herr zu werden, entschloss man sich bei Google, für das nächste Major Namensgleichheit herzustellen und die Version Angular 3 auszulassen.

Angular 5 & darüber hinaus

Juri Strumpflohner verriet auf dem Angular Blog, dass Google intern ein eigenes Tool für automatische Upgrades verwendet. Es wird, so Strumpflohner, daran gearbeitet, dieses Tool für die Öffentlichkeit verfügbar zu machen:

Internally at Google, the Angular team uses a tool for handling automatic upgrades, even of breaking changes. This is still something that has to be planned in more detail, but the team is working hard on making this tool generally available, most probably in 2017 in time for Angular 5.

Geht man nach dem angedachten Release Plan, so wird Version 5 bereits im September oder Oktober dieses Jahres erscheinen, Version 6 im März 2018. Ob diese Daten schließlich eingehalten werden (können), ist natürlich zu diesem Zeitpunkt nicht absehbar. Der Release-Plan deutet aber darauf hin, dass Google zumindest für die nächste überschaubare Zeit an dem Framework festhalten und in Angular investieren wird. Auch die Message am Ende des Blog-Postings ist klar: Ein erneutes totales Rewrite, wie beim Übergang von Angular 1 zu Angular 2, will das Angular-Team tunlichst vermeiden. Dabei könnte ein so stringenter Release-Plan behilflich sein.

Geschrieben von
Dominik Mohilo
Dominik Mohilo
Dominik Mohilo studierte Germanistik und Soziologie an der Goethe-Universität in Frankfurt. Seit 2015 ist er Redakteur bei S&S-Media.
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.