We zijn allemaal bekend met componenten: de krachtigste bouwsteen in het Angular ecosysteem. Componenten zijn waar de Dom wordt gerenderd, services worden geïnjecteerd, views worden ge-rerendered met change detection. Componenten kunnen waarden aannemen als inputs en gebeurtenissen triggeren als outputs. Maar het probleem is dat dit mooie blok tot nu toe alleen werkt binnen een Angular ecosysteem. Ik wou dat we de mensheid konden helpen door Angular componenten ook buiten het Angular ecosysteem te gebruiken.
Ja! Vanaf Angular 7, Angular brengt de functie “Angular Element”. Nu kan een Angular component worden geëxporteerd als een standalone web component. We kunnen het precies zo gebruiken als een typische HTML-tag zoals div of span, in elke HTML-pagina, CMS of zelfs binnen een React- of Vue.js-project.
Hoe het werkt:
Web Component is een webstandaard om een nieuw aangepast HTML-element in de browser te definiëren. Browsers houden een register bij met de naam customElementRegistry . Met behulp van de methode CustomElementRegistry.define() kunnen we een “dom string” registreren en een klasse die het gedrag ervan definieert.
Angular’s @angular/elements package stelt de methode createCustomElement bloot die angular component en zijn afhankelijkheden converteert als een klasse die compatibel is als een web component.
De web standaard wordt momenteel ondersteund door alle browsers Chrome, Firefox, Safari en Opera. We kunnen het ook werkbaar te maken in andere browsers met behulp van polyfills.
Use Cases:
Er zijn ten minste 3 use cases waarin we gebruik kunnen maken van exporteerbare volledig functionele angular componenten als web componenten:
- Micro frontend
- Legacy code migration
- Plug & play webcomponenten voor diensten van derden
Micro frontend:
Naast micro-service is er nog een soortgelijk concept genaamd micro-frontend. In een micro-frontend architectuur, is een klein full-stack team verantwoordelijk voor het leveren van niet alleen de API’s, maar ook de bijbehorende front-end componenten. Bijvoorbeeld, het “product team” zal product API’s en alle product-gerelateerde weergaven die worden gebruikt in verschillende categorie pagina’s, product detail pagina, winkelwagen & checkout pagina te creëren. In een geval als dit, alle team zal verschillende web-componenten te bieden en een front-end team zal alleen lijm die componenten samen in verschillende pagina’s.
Migratie:
Projecten geschreven in Angular 1.x, migratie naar Angular is altijd een uitdaging geweest. Er is geen gemakkelijke magische spreuk zoals ng update. Hetzelfde geldt voor een geval waarin iemand zijn project wil migreren naar Angular vanuit React of Vue. Webcomponenten passen hier het beste bij. Ze kunnen hun bestaande componenten/controllers geleidelijk omzetten naar Angular webcomponenten en deze vervangen vanuit het bestaande systeem. Zodra alle componenten / controllers zijn geconverteerd, kunnen ze gewoon vervangen het legacy-systeem met de nieuwste angular.
Third-party services:
Service providers kunnen plug & play webcomponenten te worden geplakt in de website van hun klant zonder enige verdere engineering nodig.
Dus lijkt het veelbelovend als we daadwerkelijk kunnen een angular component schip als een webcomponent. Dus laten we onze handen vuil maken met de eigenlijke coding.
Example project:
Hier is een voorbeeld code schrijven we een mijn-todo-lijst web component. FYI kunt u de hele code hier in Github.
Step 1: Schrijf de component en service
- Een TodoList component om een lijst van todo’s te tonen.
- Een TodoService om todo’s te halen uit placeholder JSON API.
- De TodoList component zal “naam” als input nemen.
- De TodoList-component activeert de gebeurtenis onTodoComplete wanneer een todo als voltooid wordt gemarkeerd.
Step 2: Tweak app.modules om todo-list component te exporteren
- Omdat het project alleen gebruikt zal worden om angular modules te exporteren als een web component hebben we geen bootstrapping nodig via de app component.
- We moeten onze exporteerbare todo-list component als entry component declareren.
- Installeer @angular/elements package.
- In ngDoBootstrap hook gebruiken we createCustomElement methode om onze TodoList component te compileren als een standaard web component.
- TodoList component heeft afhankelijkheid van TodoService. Aangezien het zal worden gebruikt buiten het angular ecosysteem, moeten we de Dependency Injector handmatig doorgeven, zodat het afhankelijkheden kan laden.
Stap 3: Bundelen
- Als we nu build uitvoeren, worden er bestanden gegenereerd in de map “dist”. Omdat we dit in een ander ecosysteem willen gebruiken, is het beter om de bestanden samen te voegen als één uitvoerbestand. Voeg daarom de volgende opdrachten toe aan de scriptsectie van package.json:-
"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",
- Als we nu het commando npm run build uitvoeren, worden er twee afzonderlijke bestanden output-es5.js en output-es2015.js gegenereerd in de uitvoermap.
Stap 4: Gebruik als webcomponent
- Nu is alles klaar. We kunnen deze uitvoerbestanden als onze zelfstandige webcomponent gebruiken:-
- Als we deze HTML-pagina uitvoeren, kunnen we zien dat de takenlijst wordt opgehaald en getoond.
- We hebben de naam als invoer doorgegeven, we kunnen de naam in de webcomponent zien – dat betekent dat de invoer van de component en de detectie van wijzigingen werken!
- Zodra we een todo in- of uitvinken, wordt de gebeurtenis geactiveerd en worden de todo-gegevens in de console vastgelegd. Dus de uitvoer gebeurtenis werkt ook!
Zo kunnen we een angular component in elk ander project gebruiken. U kunt zelf proberen de code te klonen van Github.
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