Nous sommes tous familiers avec les composants : la brique la plus puissante de l’écosystème Angular. Les composants sont l’endroit où le Dom est rendu, les services sont injectés, les vues sont rendues à nouveau avec la détection des changements. Les composants peuvent prendre des valeurs en entrée et déclencher des événements en sortie. Mais le problème est que, jusqu’à présent, ce magnifique bloc ne fonctionne qu’à l’intérieur d’un écosystème Angular. J’aimerais que nous puissions aider l’humanité en utilisant des composants angulaires même en dehors de l’écosystème angulaire.
Oui ! À partir de Angular 7, Angular apporte la fonctionnalité « Angular Element ». Maintenant, un composant angulaire peut être exporté comme un composant web autonome. Nous pouvons l’utiliser exactement comme une balise HTML typique comme div ou span, dans n’importe quelle page HTML, CMS ou même à l’intérieur d’un projet React ou Vue.js.
Comment ça marche:
Le composant Web est une norme Web permettant de définir un nouvel élément HTML personnalisé dans le navigateur. Les navigateurs maintiennent un registre appelé customElementRegistry . En utilisant la méthode CustomElementRegistry.define(), nous pouvons enregistrer une « chaîne dom » et une classe qui définit son comportement.
Le package @angular/elements d’Angular expose la méthode createCustomElement qui convertit le composant angulaire et ses dépendances en une classe compatible en tant que composant web.
À l’heure actuelle, la norme web est supportée par tous les navigateurs Chrome, Firefox, Safari et Opera. Nous pouvons également le rendre exploitable dans d’autres navigateurs en utilisant des polyfills.
Cas d’utilisation:
Il y a au moins 3 cas d’utilisation où nous pouvons faire usage de composants angulaires exportables entièrement fonctionnels comme composants web :
- Micro front end
- Migration de code Legacy
- Plug & play web components for third-party services
Micro front end:
Comme le micro-service, il existe un autre concept similaire appelé micro frontend. Dans une architecture micro-frontend, une petite équipe full-stack est chargée de livrer non seulement les API mais aussi leurs composants frontaux correspondants. Par exemple, l' »équipe produit » créera les API de produit et toutes les vues liées au produit utilisées dans les différentes pages de catégorie, la page de détail du produit, la page de paiement du panier &. Dans un cas comme celui-ci, toutes les équipes fourniront différents composants web et une équipe frontale ne fera que coller ces composants ensemble dans différentes pages.
Migration:
Projets écrits en Angular 1.x, la migration vers Angular a toujours été un défi. Il n’y a pas de mise à jour facile et magique de ng. La même chose est vraie pour un cas où quelqu’un veut migrer son projet vers Angular à partir de React ou Vue. Les composants Web sont la meilleure solution dans ce cas. Ils peuvent progressivement convertir leurs composants/contrôleurs existants en composants web Angular et les remplacer à partir du système existant. Une fois que tous les composants / contrôleurs sont convertis, ils peuvent simplement remplacer le système hérité par le dernier angular.
Services tiers:
Les fournisseurs de services peuvent fournir des composants web plug & play à coller dans le site Web de leur client sans aucune autre ingénierie nécessaire.
Donc, il semble que ce soit prometteur si nous pouvons effectivement expédier un composant angulaire en tant que composant web. Donc, faisons nos mains sales avec le codage réel.
Projet d’exemple:
Voici un exemple de code nous écrivons un composant web my-todo-list. FYI vous pouvez vérifier le code entier ici dans Github.
Etape 1 : Ecrire le composant et le service
- Un composant TodoList pour afficher une liste de todos.
- Un TodoService pour récupérer les todo à partir de placeholder JSON API.
- Le composant TodoList prendra « name » comme entrée.
- Le composant TodoList déclenchera l’événement onTodoComplete lorsqu’un todo sera marqué comme terminé.
Étape 2 : Tweak app.modules pour exporter le composant todo-list
- Puisque le projet sera utilisé uniquement pour exporter des modules angulaires en tant que composant web, nous n’avons pas besoin de bootstrapping à travers le composant app.
- Nous devons déclarer notre composant exportable todo-list comme composants d’entrée.
- Installer le package @angular/elements.
- Dans le hook ngDoBootstrap, nous utilisons la méthode createCustomElement pour compiler notre composant TodoList comme un composant web standard.
- Le composant TodoList a une dépendance sur TodoService. Comme il sera utilisé en dehors de l’écosystème angulaire, nous devons passer le Dependency Injector manuellement afin qu’il puisse charger les dépendances.
Étape 3 : Bundling
- Maintenant si nous exécutons le build – les fichiers seront générés dans le dossier « dist ». Comme nous voulons utiliser cela dans un autre écosystème mieux vaut concaténer les fichiers comme un seul fichier de sortie. Donc ajoutez ces commandes dans la section script du 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",
- Maintenant si nous exécutons la commande npm run build deux fichiers séparés output-es5.js et output-es2015.js seront générés à l’intérieur du dossier output.
Etape 4 : Utiliser comme un composant web
- Maintenant tout est prêt. Nous pouvons utiliser ces fichiers de sortie comme notre composant web autonome comme ceci:-
- Si nous exécutons cette page HTML, nous pouvons voir que la liste des todo sera récupérée et affichée.
- Nous avons passé le nom comme entrée, nous pouvons voir le nom à l’intérieur du composant web – ce qui signifie que l’entrée du composant, la détection de changement fonctionnent !
- Une fois que nous cochons/décochons n’importe quel todo, l’événement se déclenche et les données du todo seront enregistrées dans la console. Donc l’événement de sortie fonctionne également!
Donc, comme cela, nous pouvons utiliser un composant angulaire dans tout autre projet. Vous pouvez essayer vous-même de cloner le code depuis 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
.