Suche
AngularJS: Version 2 veröffentlicht

Angular 2 ist da: Google verkündet finales Release

Dominik Mohilo

© https://angularjs.org

Die Informationen, die das JAXenter-Team aus gut unterrichteter Quelle erhalten hatte, haben sich bestätigt: Vor wenigen Stunden 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.

Update vom 15. September

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. Fachartikel, spannende Interviews und Experten-Tipps rund um das JavaScript-/TypeScript-Framework finden Sie in unserem Themen-Dossier zu Angular 2.

 

Lesen Sie auch: Das große Angular-2-Tutorial: Wie Sie moderne Frontends für alle Plattformen entwickeln



Update vom 13. September

Wie das JAXenter-Team aus gut unterrichteter Quelle erfahren hat, könnte das finale Release von Angular 2 in Kürze erscheinen. Dafür spricht, dass der gerade veröffentlichte Release Candidate 2.0.0-rc.7 keinerlei neue 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.

Wer sich intensiver mit Angular 2 beschäftigen möchte, für den ist unser Themen-Dossier zu Angular 2 interessant: Neben spannenden Interviews und Fachartikeln gibt es dort Experten-Tipps für Angular 2. Auch, wie man Angular 2 in die Entwicklungsumgebungen Eclipse, IntelliJ IDEA und NetBeans integriert, wird dort von Angular-Profis erklärt.

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. Sobald es Neuigkeiten zum finalen Release-Termin gibt, werden Sie es auf JAXenter erfahren.



Update vom 1. September

Unsere Themenwoche zu Angular 2 ist zwar bereits vorbei, die Entwicklung von Angular 2 geht allerdings 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.

Angular 2.0.0-rc.6

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 strictMetadataEmit hinzugefü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.



Update vom 10. August 2016

Als hätten sie nur auf unsere Themenwoche zu Angular 2 gewartet, haben die Macher des Frameworks gerade den nächsten Release-Kandidaten veröffentlicht. 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.

Angular 2.0.0-rc.5

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 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.



Update vom 04. Juli 2016

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 werden sind leere CSS-Werte nun erlaubt und es gibt keine Warnung beim Desinfizieren von escaped HTML. Weitere Bugfixes betreffen unter anderem den 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, 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.



Update vom 24. Juni 2016

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.



Update vom 16. Juni 2016

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 eine Variable mit dem gleichen Namen bereits 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.

Eine vollständige Liste mit sämtlichen Bugfixes, neuen Features und Breaking Changes gibt es wie immer auf der GitHub-Seite von Angular 2.

Neue Features

Angular 2.0.0-rc.2 hat neben dem umfangreichen Bugfix-Paket allerdings auch 55 neue Features im Gepäck. Auch die neuen Features 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 nun ISO Strings, der Router Lazy Loading und das Internationalisierungsmodul (i18n) implizierte Tags bzw. Attribute. Aus letzterem können nun auch Nachrichten extrahiert werden und Fehlermeldungen können nun 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 Releasekandidaten 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 auf der GitHub-Seite von Angular 2.



Update vom 11. Mai 2016

Automatische Korrektur

HTML, Style Values und URLs werden nun automatisch korrigiert. Werte, die nicht korrekt bzw. unpassend sind, werden escaped oder ignoriert. Zum Binden einer URL oder einer Style-Eigenschaft, die normalerweise ignoriert würde, wird empfohlen diese an einen explizit als sicher markierten Wert zu binden, anstatt über Injection des DOM-Korrekturservices:

class MyComponent {
  constructor(sanitizer: DomSanitizationService) {
    // ONLY DO THIS FOR VALUES YOU KNOW TO BE SAFE! NEVER ALLOW USER DATA IN THIS!
    this.safeStyleValue = sanitizer.bypassSecurityTrustStyle('rotate(90deg)');
    // then bind to `safeStyleValue` in your template.
  }
}

Update vom 6. Mai 2016

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 der Ruler-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.



Update vom 3. Mai 2016

Angular 2.0.0-rc.0

Die wohl größte Änderung, die der erste Release Candidate mit sich bringt, ist das Repackaging von Angular 2 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.

Was ist noch neu?

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 einer NgZone 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 von Angular 2 eingesehen werden.



Original-Artikel erschienen am 2. Mai 2016 von Autor Dominik Mohilo:

Angular 2: Wohin geht die Reise?

angularjs_2_0-log-500x375Angular 2 stellt die Weiterentwicklung des beliebten JavaScript-Frameworks AngularJS dar. Das Web-Framework wird dazu verwendet, moderne Webanwendungen zu entwickeln und zu programmieren. Angular 2 wurde, geneau wie AngularJS, von Google entwickelt und ist Open Source.

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 Angular 2 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.

Im Interview mit JAXenter beantwortete AngularJS-Autor Manfred Steyer die häufigsten Fragen aus der Angular Community.

Lesetipp: Im JAXenter-Dossier „Angular 2“ finden Sie weitere Artikel zum Thema.
logo-angular-300x200
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
  1. Med Douici2016-08-15 13:29:34

    Hallo Dominik,

    Es gibt ein Fehler in dem Artikel, @AppModule ist eigentlich @NgModule
    Ich freut mich auf den Artikel und alles ist gut erklärt

    Mit freundlichen Grüßen
    Med Douici

Schreibe einen Kommentar

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