AngularJS: Version 2 veröffentlicht

Der Weg zu Angular 2
2 Kommentare

Vor einigen Wochen hat Jules Kremer von Google die Veröffentlichung der finalen Version von Angular 2 verkündet. Das Team wird damit den Erwartungen gerecht, noch dieses Jahr den Nachfolger des beliebten JavaScript-/TypeScript-Frameworks zu veröffentlichen. Mit Angular 2.1.0 steht nun auch die erste Minor-Version des Frameworks zur Verfügung.

Angular 2 stellt die Weiterentwicklung des beliebten JavaScript-Frameworks AngularJS dar. Das Web-Framework wird dazu verwendet, moderne Webanwendungen zu entwickeln und zu programmieren. Beide Frameworks wurden von Google entwickelt und sind Open Source.

Angular 2: Wohin geht die Reise?

Mit der Entwicklung von Angular 2 wurde ein kompletter Overhaul initiiert: Das Framework wird nicht mehr in JavaScript sondern in TypeScript entwickelt und zielt vor allem auf die Verbesserung der Entwicklung von Mobile-Apps ab. Die von Google eigens für die neue Version des JavaScript-Frameworks entwickelte Sprache AtScript wurde ad acta gelegt.

Neben der besseren Funktionalität soll Angular 2 auch eine bis zu acht mal bessere Performance bieten als der Vorgänger. Durch den Umstieg auf TypeScript wurden Funktionen wie Auto-Completion, Go-To-Definition und andere IDE-Funktionen zum Umfang des Frameworks hinzugefügt. Dinge, die Entwickler beim Vorgänger vermissen.

Angular 2.0.0-rc.0

Die wohl größte Änderung, die der erste Release Candidate mit sich bringt, ist das Repackaging in individuelle Pakete. Jedes dieser Pakete umfasst bestimmte Teile des Frameworks; alle Pakete werden im Rahmen von @angular npm bereitgestellt. Dies verändert die Art und Weise, wie Angular per npm installiert und wie der jeweilige Code importiert wird.

Im ersten Release Candidate wurde besonders der Bereich Router überarbeitet. Neben der verbesserten Rückwärtskompatibilität wurde ein neuer Component Router hinzugefügt, der einige wichtige Änderungen enthält. Am Testing wurde ebenfalls geschraubt, sodass es nun möglich ist, die Testkomponente in einerNgZone zu instantiieren, zusätzlich wurden drei neue API implementiert.

Eine genaue Anleitung zur neuen Installation und die vollständige Liste mit Änderungen und Bugfixes kann auf der GitHub-Seite zum aktuellen Update eingesehen werden.

Angular 2.0.0-rc.1

Das Team von Angular 2 hat eine Sicherheitswarnung herausgegeben: Demnach ist das Contextual Escaping noch nicht in Angular 2 eingebunden. Dies soll erst mit Release Candidate 2 gefixt werden. In der Zwischenzeit bittet das Team darauf zu achten, dass alle Werte korrekt escaped werden, die in das DOM gehen.

Weitere bekannte Probleme sind die fehlenden Source Maps für UMD-Bundles und die Tatsache, dass derRuler-Service nicht via @angular/platform-browser reexported wird. Dafür ist es nun möglich, den RouterLink einzelne Werte akzeptieren zu lassen.

Auch neun Bugs wurden im RC 1 gefixt, darunter die Berechnung der falschen moduleUrl.

Angular CLI

Lange ersehnt, nun endlich auf der ng-conf 2016 vorgestellt: das Angular-CLI-Tool. Mike Brocchi präsentierte Angular CLI und seine Möglichkeiten und erklärte, dass das Tool vor allem dazu da sei, die Einstiegshürden in Angular-2-Projekte zu minimieren. So verfügt Angular CLI über einige Features, die dabei helfen, die Startzeit eines Projekts zu reduzieren. Dazu gehören z. B. ng new project-name, ng build und ng test. Alle nötigen Einstellungen übernimmt dabei das Tool.

Zudem ermöglicht es Angular CLI Entwicklern, Befehle auszuführen, um neue App-Komponenten wie Components und Routes zu erstellen. So wird etwa mit ng generate pipe my-pipe eine neue Pipe erstellt und direkt am richtigen Ort abgelegt. Allerdings ist das Tool nur unter Angular 2 und nicht unter Angular 1.x nutzbar. Derzeit befindet sich Angular CLI in der Beta-Phase; die Entwickler arbeiten an der Integration von Offline-Template-Compilation, langsam ladenden Routes und Erweiterbarkeit. Auf GitHub finden sich weiterführende Informationen sowie eine Download-Möglichkeit.

Angular 2.0.0-rc.2

Rund sechs Wochen dauerten die Arbeiten am zweiten Release Candidate von Angular 2. Das ist, bedenkt man die bisherige Geschwindigkeit, in der Updates veröffentlicht wurden, ziemlich lang. Das Warten hat sich allerdings gelohnt: 95 Bugs schließt die RC2-Version, an allen Ecken und Enden des Programms wurden Fehler behoben. Begonnen beim Compiler, der nun einen Fehler ausgibt, wenn er beim Erstellen einer Variable feststellt, dass bereits eine Variable mit dem gleichen Namen existiert, bis hin zum Router, der nun das Öffnen von Links im neuen Tab unterstützt. Hier gibt es eine komplette Liste der Bugfixes, mit Querverweisen zu den jeweils geschlossenen Problemen.

Neue Features

Angular 2.0.0-rc.2 hat neben dem umfangreichen Bugfix-Paket allerdings auch 55 neue Features im Gepäck. Auch diese verteilen sich auf einen Großteil der für das Framework definierten Programmteile, sodass mit Fug und Recht behauptet werden kann, dass der zweite Release Candidate Angular 2 in seiner Gesamtheit verbessert und das Team nicht nur an bestimmten Funktionen geschraubt hat.

Zu den neuen Features zählt unter anderem der neue Support für Animationen und die darauf basierende Unterstützung des Default Animation State-Stylings. Zudem gibt es mit Angular 2 in Bezug auf Animationen nun Support für das Offline-Kompilieren. Die DatePipe unterstützt jetzt ISO Strings, der Router Lazy Loading und das Internationalisierungsmodul (i18n) implizierte Tags bzw. Attribute. Aus letzterem können nun auch Nachrichten extrahiert und Fehlermeldungen auch Dateipfade hinzugefügt werden.

Neben diesen Änderungen wurde Angular 2 im aktuellen Update ein sogenannter Component Resolver hinzugefügt. Dieser kann Komponenten unter Verwendung der Datei system.js “lazy” laden. Auch der Sicherheitsaspekt wurde im zweiten Release Candidate nicht vernachlässigt: So wurde das automatisierte XSRF-Handling implementiert und das DOM-Sicherheitsschema komplettiert.

Eine vollständige Liste mit sämtlichen Bugfixes, neuen Features und Breaking Changes gibt es im Changelog von Angular 2.

Angular Kickstart: von 0 auf 100

mit Christian Liebel (Thinktecture AG) und Peter Müller (Freelancer)

JavaScript für Softwareentwickler – für Einsteiger und Umsteiger

mit Yara Mayer (evia) und Sebastian Springer (MaibornWolff)

API Conference 2018

API Management – was braucht man um erfolgreich zu sein?

mit Andre Karalus und Carsten Sensler (ArtOfArc)

Web APIs mit Node.js entwickeln

mit Sebastian Springer (MaibornWolff GmbH)

Angular 2.0.0-rc.3

Gerade einmal sechs Tage ist es her, seit die Entwickler von Angular 2 ihren letzten Release Candidate veröffentlicht haben, die sehr lange Pause zwischen RC1 und RC2 war ungewöhnlich lang, das Update entsprechend umfangreich. Nun also wurde der dritte Release Candidate veröffentlicht, 19 Bugfixes und 11 Features – also rund 30 größere und kleinere Änderungen beinhaltet er.

In Sachen Bugfixes wird das ngModel nun auch als solches exportiert, im Bereich Core/Testing werden nun komplette Fehlermeldungen angezeigt und im BroweserUtil wurd das Kommando supportsIntlApi()gefixt. Zudem wurde das Public API des Platform-Servers aufgeräumt und bereinigt.

Zu den neuen Features gehört eine neue Nutzermetrik für Benchpress und im Compiler können Interpolationssymbole nun konfiguriert werden (@Component config). Für datePipe wurde die Unterstützung von numerischen Strings implementiert und für QueryList kann nun in Callbacks ein Index erstellt werden.

Angular 2.0.0-rc.4

Die Entwicklung von Angular 2 schreitet unbeirrt voran: Der aktuelle Release Candidate (RC4) bringt 35 Bugfixes und 15 neue Features. Wie immer gibt es auch einige Breaking Changes, die unbedingt Beachtung bei der Nutzung der aktuellen Vorabversion finden sollten. Während bei den Bugfixes erneut kein wirklicher Fokus zu sehen ist, wurde bei den Features vor allem der Formular-Bereich bedacht.

Der Compiler gibt nun einen Fehler aus, wenn auf nicht-existierende Dateien verwiesen wird, außerdem wird viewProviders nun nicht mehr in Tochterelemente injiziert. In Sachen Sicherheit sind leere CSS-Werte nun erlaubt und es gibt keine Warnung beim Desinfizieren von escaped-HTML. Weitere Bugfixes betreffen unter anderem NgSwitch, in dem eine Fehlermeldung nun nur noch einmal angezeigt wird und das öffentliche API, bei dem die sogenannten Golden Files aktualisiert wurden.

Im Bereich Formulare wurde die Unterstützung von alleinstehenden ngModel-Direktiven und fromArrayName ermöglicht, zudem wird das Aktualisieren von Validatoren in ausgehenden Kontrollen nun ebenfalls supportet. Bei abstrakten Kontrolldirektiven sind nun valueChanges und statusChanges verfügbar, Radio Buttons nutzen seit RC 4 nun die Funktion formControlName wenn kein Name verfügbar ist.

Die async-Funktion stellt im aktuellen Update von Angular 2 fest, ob sie ein Promise zurückgeben oder einen done function-Parameter aufrufen soll. Das Importieren von Jasmine-Funktionen aus @angular/core/testing ist nicht mehr nötig und wird nicht mehr unterstützt, genau wie die Funktion beforeEachProviders. Anstatt Letzteres zu verwenden wird die Nutzung der neuen addProviders-Methode empfohlen:

Vorher:

import {beforeEachProviders, it, describe, inject} from '@angular/core/testing';

describe('my code', () => {
beforeEachProviders(() => [MyService]);

it('does stuff', inject([MyService], (service) => {
// actual test
});
});

Nachher:

import {addProviders, inject} from '@angular/core/testing';
 
describe('my code', () => {
  beforeEach(() => {
    addProviders([MyService]);
  });
 
  it('does stuff', inject([MyService], (service) => {
    // actual test
  });
});

Eine Übersicht über sämtliche Änderungen, Bugfixes und Features des aktuellen Release Candidates gibt es wie immer auf der entsprechenden GitHub-Seite.

Angular 2.0.0-rc.5

Mit Angular 2.0.0-rc.5 wurden etwa 80 Bugs gefixt, 43 Features neu eingebaut bzw. verbessert und es gab 13 Änderungen am Code. Im Gepäck hat das Update auch den ersten Release Candidate des Angular Routers 3.0.0, für den es 16 neue bzw. verbesserte Features und 22 Bugfixes gibt. Damit ist die Beta-Phase des Routers abgeschlossen.

Das Highlight des aktuellen Updates dürften die neu eingeführten Application Modules sein. Mit ihnen können Nutzer Einstiegspunkte für Angular-Anwendungen und lazy loaded Code festlegen. Hinzu kommt die Möglichkeit, Meta-Informationen für den jeweiligen Teil der Anwendung für den Compiler als auf andere Tools zur Verfügung zu stellen.

Diese Funktion dient dazu, Plattform-Direktiven, Plattform-Pipes, Root-Komponenten und Anwendungs-Provider auf einem höheren Level als den Komponenten zu gruppieren. Aussehen soll das Ganze wie folgt:

@AppModule({
 // directives that should be usable in all components
 directives: [...],
 // pipes that should be usable in all components
 pipes: [...],
 // providers that should be usable in all components
 providers: [...]
 // root components to be precompiled
 precompile: [MyMainComponent, ...],
 // modules listed here will be merged into this module,
 // allowing this module to still overwrite their providers, ...
 modules: [FormsModule, RouterModule, ...]
})
class MyAppModule {
}

Zudem können Module mit Hilfsfunktionen ausgestattet werden, die es erlauben, ein Modul gemeinsam mit einer großen Anzahl von Providern zu importieren. Da der Compiler weiß, wie er die @AppModules in AppModuleFactories kompilieren muss, können diese via AppModuleLoader lazy geladen werden. Auch das Testen wird unterstützt, hierfür wird ein impliziertes Anwendungs-Modul für jeden Test erstellt.

Weitere Informationen zu den Application Modules gibt es hier. Alle Änderungen und Bugfixes sowie Breaking Changes des Updates finden sich auf der GitHub-Seite von Angular 2.

Angular 2.0.0-rc.6

Die Entwicklung von Angular 2 geht kontinuierlich weiter: Wieder wurden 61 Bugs gefixt, sodass die Anzahl an gefixten Bugs in der Release-Candidate-Phase auf etwa 300 ansteigt. Neben den Bugfixes bringt Version 2.0.0-rc.6 auch 25 Code Refactorings, 27 Verbesserungen an der Funktionalität von Angular 2 und 4 Peer-Dependency-Updates. Die umfangreiche Umstrukturierung sorgt für 32 Breaking Changes, die die Nutzer beachten sollten.

Code Redactoring & Peer-Dependency Updates

Das Code Refactoring beinhaltete vor allem das Entfernen von einigen als deprecated gekennzeichneten Modulen und APIs. Zu diesen gehören unter anderem die ReplacePipe sowie @Component.directives und@Component.pipes. Doch es wurden nicht nur Funktionen entfernt, manche wurden auch einfach zusammengelegt: Aus Type und ConcreteType<? > wurde im aktuellen RC nun Type<? >. Umbenannt wurden hingegen der SanitizationService, der nun Sanitizer heißt und der DomSanitizationService, welcher nun als DomSanitizer bekannt ist.

Mit dem aktuellen Release Candidate kamen folgende Peer-Dependency Aktualisierungen:

  • zone.js auf Version 0.6.17
  • rxjs auf Version 5.0.0-beta.11
  • TypeScript auf Version 2.0.2

Zudem ist die reflect-metadata Dependency nun optional, wenn man Angular im AOT-Modus nutzt.

Neue Features

In Sachen neue Features gibt es viele kleine Verbesserungen in beinahe allen Bereichen von Angular 2. Der Kernbereich des Frameworks wurde um die Möglichkeit erweitert, Präfixe sowie Suffixe von Modulen frei zu konfigurieren und ngprobe-Tokens sind von nun an pluggable. Wichtig zu erwähnen ist auch, dass das public API von Angular 2 aktualisiert wurde. Dem Compiler wurde die Option strictMetadataEmithinzugefügt, außerdem gibt es nun eine Fehlernachricht, wenn locale nicht zur Verfügung gestellt wird.

Auch die Internationalisierung (i18n) wurde verbessert. Ein HtmlParser-Decorator wurde in Angular 2 implementiert und xliff erfolgreich integriert. Außerdem können nun für den primary Build können nun in npm-Packages ES-Module verwendet werden und der Router unterstützt individualisierbare Error Handler.

Eine Vollständige Übersicht mit den Änderungen gibt es wie immer auf der GitHub-Seite von Angular 2. Dort werden auch sämtliche Breaking Changes dokumentiert und eine Liste mit Bugfixes ist ebenfalls einsehbar.

Angular 2.0.0-rc.7

Das finale Release von Angular 2 könnte in Kürze erscheinen. Dafür spricht, dass der gerade veröffentlichte Release Candidate 2.0.0-rc.7 keinerlei neuen Features beinhaltet. Das neueste Update von Angular bringt lediglich rund 20 Bugfixes, ein wenig Code-Refactoring und zwei Peer-Dependency Updates.

Das Fehlen von neuen Funktionen ist ein Novum in der Release-Geschichte von Angular 2, bei der praktisch jede Alpha-, Beta- und RC-Version mindestens ein neues Feature beinhaltete. Dies könnte ein Hinweis darauf sein, dass die finale Version tatsächlich in absehbarer Zeit veröffentlicht wird.

Änderungen in Angular 2.0.0-rc.7

Dem Compiler von Angular 2 wurden fehlende Elemente zum DOMSchema hinzugefügt, sodass nun etwa die HTML5-Tags <time> und <summary> normal nutzbar sind, außerdem wurde der Selector CssSelector#getMatchingElementTemplate() für leere Tags gefixt. Ein Problem mit der Performance konnte ebenfalls behoben werden: Hängte man Bilder als Daten-URLs an den CSS-Output, brach die Performance deutlich ein. Ladezeiten von bis zu 30 Sekunden für 50 Kilobyte Daten waren keine Seltenheit. Der Bug kam allerdings Berichten zu Folge nur in Angular 2.0.0-rc.6 vor.

Im Kernbereich von Angular ist nun group() als Einstiegspunkt für einen Animation Trigger verfügbar. Damit wurde das Problem der nicht parallel laufenden Animationen von Transition Groups gelöst; diese führten Animationen nacheinander aus. Der Fehler, wenn NgModule.bootstrap die Elemente undefined oder null enthielt, wurde ebenfalls behoben.

Das Code-Refactoring beinhaltete diesmal die Entfernung von …Metadata für sämtliche Decorators. Zukünftig sollen Nutzer den Decorator direkt nutzen. Dies führte zu einem Breaking Change, anstelle von new ComponentMetadata(…) soll nun new Component(…) genutzt werden, was allerdings auch vorher schon funktionierte.

Folgende Peer-Dependency Aktualisierungen wurden im aktuellsten Release Candidate vorgenommen:

  • zone.js auf Version 0.6.21
  • rxjs auf Version 5.0.0-beta.12

Eine vollständige Liste mit Aktualisierungen und Bugfixes gibt es wie immer auf der GitHub-Seite von Angular 2.

Angular 2 erscheint in finaler Version

Exakt neun Monate hat die Entwicklung seit dem Start der Beta-Phase in Anspruch genommen. Allein während der Release-Candidate-Phase gab es über 300 Bugfixes für das Framework und hunderte Features und Verbesserungen wurden implementiert. Diese stehen Entwicklern auf der ganzen Welt nun stabil und “production ready” zur Verfügung.

Doch mit dem finalen Release des Nachfolgers von Angular 1 ist die Arbeit für das Team und die Open-Source-Community rund um das neue Framework nicht vorbei. Die Macher haben weitere Bugfixes und non-breaking Features für die stabilen APIs und eine Weiterentwicklung der Animationen angekündigt. Zudem möchte das Team auch die Entwicklung von Angular Material 2 und WebWorkers weiter vorantreiben, für Angular Universal sind neue Features und Sprachen geplant.

Eine wichtige Änderung – obwohl die finale Version nur zwei kleinere Bugfixes brachte – gibt es allerdings noch: Ab sofort werden die Updates von Angular 2.0.0 ein semantisches Versionierungsmodell nach dem Muster MAJOR.MINOR.PATCH verwenden. Dies ist eine Reaktion auf die Stimmen der Community, die die verwendete Namensgebung der Release-Candidates ein wenig verwirrend fanden.

Die komplette Änderungshistorie ist auf der GitHub-Seite von Angular 2 einzusehen, Informationen zu sämtlichen Features und wie man mit Angular 2 durchstarten kann, gibt es auf der Web-Seite des Frameworks.

Angular Router 3.0.0-rc.1

Dem Router wurde im ersten Release-Kandidaten die Unterstützung für lazily loaded modules sowie für canActivateChild hinzugefügt. Es wurden außerdem PRIMARY_OUTLET in primary und UrlPathWithParams schlicht in UrlSegment umbenannt.

Das Router-Modul wurde für die Arbeit mit der Offline-Kompilierung angepasst und Links sollten nun bei einem Wechsel der Query-Parameter automatisch aktualisiert werden. Der Zurück-Button sollte nun auch in Version 11 des Internet Explorers und in Safari funktionieren. Im Bereich der Navigation werden Query-Parameter und -Fragmente nun auch nicht mehr standardmäßig beibehalten.

Sämtliche Bugfixes und Features sind auf der GitHub-Seite des Angular Routers aufgelistet.

Angular 2.1.0 steht zur Verfügung

Mit Angular 2.1.0 steht das erste Minor-Release für die kürzlich veröffentlichte neue Angular-Version – Angular 2.0 – zur Verfügung. Das Update ist mit Absicht klein gehalten und umfasst vor allem einige Bug-Fixes und kleinere Verbesserungen. So unterstützt etwa der Router nun das Preloading von Lazy-Loaded-Modulen; zudem wurde die Animation in Angular durch das Hinzufügen der :enter– und :leave-Aliases zu den void => * und * => void-State-Changes verbessert.

Mehr Informationen dazu bietet der zugehörige Blogpost im AngularJS-Blog; alle weiteren Änderungen lassen sich den Release Notes zu Angular 2.1.0 entnehmen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

2 Kommentare auf "Der Weg zu Angular 2"

avatar
400
  Subscribe  
Benachrichtige mich zu:
trackback

[…] neu in diesem WebStorm-2016.2-EAP-Build ist der Support des Release Candidates von Angular 2, der unter anderem dafür sorgt, dass Variable-Declarations mit let innerhalb der strukturellen […]

trackback

[…] war es endlich soweit und Angular 2 wurde in der finalen Version veröffentlicht. Im Zuge dessen stellt jetzt auch das […]

X
- Gib Deinen Standort ein -
- or -