Wir alle sind mit Komponenten vertraut: der mächtigste Baustein im Angular-Ökosystem. Komponenten sind der Ort, an dem das Dom gerendert wird, Dienste werden injiziert, Ansichten werden mit Änderungserkennung neu gerendert. Komponenten können Werte als Inputs annehmen und Events als Outputs auslösen. Aber das Problem ist, dass dieser schöne Block bisher nur innerhalb des Angular-Ökosystems funktioniert. Ich wünschte, wir könnten der Menschheit helfen, indem wir Angular-Komponenten auch außerhalb des Angular-Ökosystems verwenden.
Ja! Ab Angular 7 bringt Angular das Feature „Angular Element“. Jetzt kann eine Angular-Komponente als eigenständige Webkomponente exportiert werden. Wir können sie genau wie ein typisches HTML-Tag wie div oder span in einer beliebigen HTML-Seite, einem CMS oder sogar in einem React- oder Vue.js-Projekt verwenden.
Wie es funktioniert:
Web Component ist ein Webstandard zur Definition eines neuen benutzerdefinierten HTML-Elements im Browser. Browser führen ein Register namens customElementRegistry . Mit der Methode CustomElementRegistry.define() können wir einen „dom string“ und eine Klasse registrieren, die sein Verhalten definiert.
Angulars @angular/elements-Paket stellt die Methode createCustomElement zur Verfügung, die die Angular-Komponente und ihre Abhängigkeiten in eine Klasse umwandelt, die als Web-Komponente kompatibel ist.
Zurzeit wird der Web-Standard von allen Browsern Chrome, Firefox, Safari und Opera unterstützt. Wir können es auch in anderen Browsern mit Polyfills funktionsfähig machen.
Anwendungsfälle:
Es gibt mindestens 3 Anwendungsfälle, in denen wir exportierbare, voll funktionsfähige Angular-Komponenten als Web-Komponenten nutzen können:
- Micro-Frontend
- Legacy-Code-Migration
- Plug & Play-Webkomponenten für Dienste von Drittanbietern
Micro-Frontend:
Wie bei Micro-Services gibt es ein ähnliches Konzept, das Micro-Frontend. In einer Mikro-Frontend-Architektur ist ein kleines Full-Stack-Team dafür verantwortlich, nicht nur die APIs, sondern auch die entsprechenden Frontend-Komponenten bereitzustellen. Zum Beispiel erstellt das „Produktteam“ Produkt-APIs und alle produktbezogenen Ansichten, die auf den verschiedenen Kategorieseiten, der Produktdetailseite und der Warenkorb-&-Kassenseite verwendet werden. In einem solchen Fall werden alle Teams verschiedene Webkomponenten bereitstellen und ein Frontend-Team wird nur diese Komponenten in verschiedenen Seiten zusammenkleben.
Migration:
Projekte, die in Angular 1.x geschrieben wurden, die Migration zu Angular war immer eine Herausforderung. Es gibt keinen einfachen Zauberspruch wie ng update. Dasselbe gilt für den Fall, dass jemand sein Projekt von React oder Vue auf Angular migrieren möchte. Webkomponenten sind hier die beste Lösung. Sie können ihre bestehenden Komponenten/Controller schrittweise in Angular-Webkomponenten umwandeln und sie durch das bestehende System ersetzen. Sobald alle Komponenten/Controller konvertiert sind, können sie das Altsystem einfach durch das neueste Angular ersetzen.
Dienstleistungen von Drittanbietern:
Dienstleister können Plug- &Play-Webkomponenten bereitstellen, die in die Website ihrer Kunden geklebt werden können, ohne dass eine weitere Entwicklung erforderlich ist.
So scheint es vielversprechend zu sein, wenn wir eine Angular-Komponente tatsächlich als Webkomponente ausliefern können. Machen wir uns also die Hände schmutzig mit der eigentlichen Codierung.
Beispielprojekt:
Hier ist ein Beispielcode, mit dem wir eine my-todo-list Webkomponente schreiben. Zu Ihrer Information können Sie den gesamten Code hier in Github überprüfen.
Schritt 1: Schreiben der Komponente und des Dienstes
- Eine TodoList-Komponente, um eine Liste von Todos anzuzeigen.
- Ein TodoService, um Todos von der Platzhalter-JSON-API zu holen.
- Die TodoList-Komponente wird „Name“ als Eingabe nehmen.
- Die TodoList Komponente wird das onTodoComplete Ereignis auslösen, wenn ein Todo als erledigt markiert wird.
Schritt 2: app.modules anpassen, um todo-list-Komponente zu exportieren
- Da das Projekt nur zum Exportieren von Angular-Modulen als Web-Komponente verwendet wird, brauchen wir kein Bootstrapping durch die app-Komponente.
- Wir müssen unsere exportierbare TodoList-Komponente als Einstiegskomponente deklarieren.
- Installieren Sie das @angular/elements-Paket.
- Innerhalb des ngDoBootstrap-Hakens verwenden wir die createCustomElement-Methode, um unsere TodoList-Komponente als Standard-Webkomponente zu kompilieren.
- Die TodoList-Komponente ist von TodoService abhängig. Da sie außerhalb des Angular-Ökosystems verwendet werden soll, müssen wir den Dependency Injector manuell übergeben, damit er Abhängigkeiten laden kann.
Schritt 3: Bündelung
- Wenn wir nun den Build ausführen – werden Dateien im „dist“ Ordner generiert. Da wir diese in einem anderen Ökosystem verwenden wollen, ist es besser, die Dateien zu einer einzigen Ausgabedatei zusammenzufassen. Fügen Sie also diese Befehle in den package.json Skriptabschnitt ein:-
"concat-es5": "concat -o output/output-es5.js ./dist/example-ng-element/runtime-es5.js ./dist/example-ng-element/polyfills-es5.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es5.js","concat-es2015": "concat -o output/output-es2015.js ./dist/example-ng-element/runtime-es2015.js ./dist/example-ng-element/polyfills-es2015.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es2015.js","concat": "npm run concat-es5 && npm run concat-es2015","build": "ng build --prod --output-hashing=none && npm run concat",
- Wenn wir nun den Befehl npm run build ausführen, werden zwei separate Dateien output-es5.js und output-es2015.js im output-Ordner erzeugt.
Schritt 4: Verwendung als Webkomponente
- Jetzt ist alles bereit. Wir können diese Ausgabedateien als eigenständige Webkomponente wie folgt verwenden:-
- Wenn wir diese HTML-Seite aufrufen, können wir sehen, dass die ToDo-Liste abgerufen und angezeigt wird.
- Wir haben den Namen als Eingabe übergeben, wir können den Namen innerhalb der Webkomponente sehen – was bedeutet, dass die Eingabe der Komponente und die Erkennung von Änderungen funktionieren!
- Wenn wir ein Todo abhaken/abwählen, wird ein Ereignis ausgelöst und die Todo-Daten werden in der Konsole protokolliert. Also funktioniert auch das Output-Event!
So können wir eine Angular-Komponente in jedem anderen Projekt verwenden. Sie können selbst versuchen, den Code von Github zu klonen.
Ref:
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
- https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
- https://angular.io/guide/elements