Angular 2 und Third-party Libraries

Will man seine Anwendung schrittweise von Angular 1 auf Angular 2 upgraden, gibt es neben den neuen Konzepten und Features auch Nebeneffekte, die ein einfaches Upgraden der Anwendung erschweren. Gemeint ist die Kompatibilität von Third-party Libraries, die in Angular 2 nur noch bedingt oder gar nicht mehr funktionsfähig sind. In diesem Teil soll deshalb ein Überblick über die Bibliotheken gegeben werden, die im Verlauf unseres Upgrades auf Angular 2 Probleme aufgeworfen haben.

Angular 2 und Web Components

Aktuell nutzt unsere Web-Anwendung die Angular Material Library, um UI-Elemente wie Buttons oder Checkboxen darzustellen. Nach längerem probieren hat sich jedoch herausgestellt, dass viele UI-Elemente dieser Library inkompatibel mit dem Angular 2 Framework sind.

Wir mussten deshalb nach einer alternativen Lösung suchen, um UI-Elemente zusammen mit dem Angular 2 Framework zu verwenden. Folgende drei Möglichkeiten kamen dabei in Frage:

  1. Angular Material 2: Hierbei handelt es sich um den Nachfolger der Angular Material 1 Library. Diese befindet sich aktuell jedoch noch in der Alpha-Phase, weshalb mit vielen Änderungen und Fehlern zu rechnen ist.
  2. Polymer (Web Components): Die Polymer Library setzt auf den Web-Components-Standard auf und soll das Erstellen eigener Custom Elements vereinfachen. Besonders interessant ist für uns die Eigenschaft, dass Polymer eine Vielzahl an UI-Elementen in einem Katalog zur Verfügung stellt.
  3. UI-Elemente selbst umsetzen: Vorstellbar wäre auch die Verwendung von existierenden HTML-Elementen wie einem Button und diesen nach Bedarf zu stylen. Dieser Weg wäre sicherlich der einfachste aber der Mühsamste.

Nach längerem Evaluieren haben wir uns für die Web-Components-Variante entschieden, da wir ein großes Interesse an neuen Technologien haben und wir denken, dass Web Components in Zukunft eine große Rolle in der Entwicklung von Web-Anwendung spielen werden. Die schiere Zahl an UI-Elementen des Polymer-Kataloges hat unsere Entscheidung weiter bestärkt.

Installation eines Polymer-UI-Elements

Um die einzelnen UI-Elemente des Polymer-Kataloges zu verwenden, müssen diese Elemente als erstes installiert werden. Die Installation eines Polymer-UI-Eementes erklären wir anhand des paper-button.

Als erstes muss sichergestellt werden, dass der Dependency Manager Bower installiert ist. Dieser kann bequem über npm installiert werden:

Das gewünschte Element paper-button kann anschließend über Bower mit dem folgenden Befehl installiert werden:

Bower löst automatisch die Abhängigkeiten auf und installiert diese ebenfalls mit.

Um ein Polymer-Element verwenden zu können, muss zunächst die Polyfill Library webcomponents-lite.min.js geladen werden:

Nachdem die Library zur Verfügung steht, kann nun ein einzelnes Element über HTML Imports verwendet werden.

Eine detailliertere Installationsanleitung findet sich auf der Webseite des Polymer Projekts.

Instanziierung eines Polymer UI-Elements

Das soeben installierte paper-button-Element kann dann innerhalb einer Angular-2-Direktive wie folgt instanziiert werden:

Angular 2 and ngDialog

Unsere Web-Anwendung nutzt die Bibliothek ngDialog, um modale Dialoge darzustellen. Die leichtgewichtige Library bietet die Möglichkeit, Dialoge auf einfache Weise in Angular-1-Anwendungen einzubinden. Dank einer Vielzahl an Optionen und einer effizienten API können mithilfe der Library nahezu alle Anforderungen abgedeckt werden, die ein Entwickler an einen Dialog stellen kann. Verwendet man ngDialog jedoch im Kontext von Angular 2, kann es zu Einschränkungen kommen.

In unserer Web-Anwendung wurde so versucht eine Angular-2-Komponente innerhalb eines ngDialogs darzustellen. Für die Verwendung von Angular-2-Komponenten in Angular-1-Anwendungen kann der Upgrade-Adapter von Angular verwendet werden: Dieser überführt die Komponente in eine Angular-1-Direktive. Die Dependencies der Direktive werden dabei weiterhin über den Angular 2 Injector aufgelöst, welcher für die Dependency Injection innerhalb von Angular 2 verantwortlich ist. Auf den Controller des Angular 2 Injector wird dabei über das Require-Attribut der Direktive zugegriffen.

Das Problem ist, dass der Angular 2 Injector Controller von der Direktive nicht gefunden werden kann. Ein Required-Controller wird dabei immer vom Elternknoten an die Direktive weitergereicht. Da unser Dialog kompiliert wird, bevor er an der entsprechenden stelle im DOM eingefügt wird, kann der Injector Controller nicht an die Direktive weitergegeben werden. Somit steht der Angular 2 Injector innerhalb des Dialogs nicht zur Verfügung, sodass er vom Upgrade-Adapter nicht gefunden werden kann. Da dieser von der Direktive required wird, kommt es zu einem Fehler.

Um dieses Problem zu lösen, waren wir gezwungen, einen alternativen Weg für die Einbindung von Dialogen innerhalb unserer Anwendung zu suchen. Auch hier fiel unsere Entscheidung auf die zukunftsorientierte Polymer Library, die unter der Vielzahl an UI-Elementen einen Dialog mit dem Namen paper-dialog bereitstellt.

Integration des paper-dialogs

Die Implementierung des paper-dialogs beginnt mit der Installation der Polymer-UI-Komponente mit Hilfe des Paketverwaltungs-Tools Bower.

Wie bereits beschrieben, werden automatisch alle Abhängigkeiten von Bower aufgelöst. Nun kann der paper-dialog eingebunden werden, wobei nachfolgend ein modaler Dialog erzeugt wird:

Der Inhalt des Dialogs wird dabei zwischen den beiden paper-dialog tags definiert. Über die Attribute dialog-dismiss und dialog-confirm werden an die eingebundenen paper-buttons automatisch die entsprechenden EventListener angehängt und der Dialog wird geschlossen.

Will man den Dialog öffnen, muss zunächst die paper-dialog-Instanz referenziert werden. Hier bietet es sich an, eine ID für jeden Dialog zu vergeben, sodass über JavaScript bequem auf das Element zugegriffen werden kann. Über die open-Methode kann dann der Dialog geöffnet werden.

An dieser stelle empfiehlt es sich, eine eigene Angular-2-Komponente für den jeweiligen Dialog anzulegen. Die Gründe hierfür liegen vor allem in der Wartbarkeit und Übersichtlichkeit des Sourcecodes und erfüllen die Komponentenphilosophie der Web Components.

We’re hiring!

Tapetenwechsel gefällig? Wir sind auf der Suche nach begeisterten Frontend-Entwicklern, die unsere Projektteams im Umfeld von JavaScript, HTML und CSS unterstützen und mit uns das Potenzial innovativer Technologien wie Angular2 und Progressive Web Apps erkunden wollen. Jetzt Bewerben!

Weiterlesen

Mehr Informationen zu unseren Dienstleistungen rund um die Web-Entwicklung gibt es auf unserer Website. Unser Portfolio umfasst außerdem die Anwendungsentwicklung für Android & iOS mit speziellem Fokus auf Enterprise-Apps. Für direkten Kontakt schreibt an info@inovex.de oder ruft an unter +49 721 619 021-0.

comments powered by Disqus