Composants angulaires et Web, par exemple, éléments angulaires

À propos

Dans cette rubrique, je souhaite partager les résultats de la recherche sur les composants Angular 5 et Web. Nous verrons comment créer et utiliser des composants Web dans Angular 5 et quels avantages nous pouvons obtenir.

Éléments angulaires

Officiellement, Angular ne prend pas encore en charge les composants Web, mais il existe une branche dans le référentiel angular et quand j’ai vu, elle a décidé de jouer avec elle et de voir comment cela fonctionnerait. L'équipe angulaire a nommé ce package “@ angular / elements”. Les résultats de la recherche ont été vraiment impressionnants, à tel point que j’ai décidé d’écrire un sujet et de le partager avec vous (je ne suis pas un blogueur et je n’écris pas trop, mais cette recherche était exceptionnelle!).

Comment créer des composants Web

Disons que nous voulons créer des composants Web standard en utilisant Angular, c’est trop simple :) laissez-moi vous montrer comment:

La première étape consiste à créer un nouveau projet en utilisant angular cli:

`ng new web-components-sample`

La prochaine étape consiste à ajouter un composant angulaire standard et à l'appeler «bouton similaire»:

`ng g composant like-button`

Avant cela, nous le faisions tous les jours. Nous devons maintenant enregistrer et exporter ce nouveau composant en tant que composant Web. Pour ce faire, nous devons suivre quatre étapes simples:

  1. copier les classes @ angular / elements du dépôt angular dans notre projet, nous devons le faire manuellement, car ce paquet n'est pas encore sorti
  2. installez @ webcomponents / custom-elements et importez-le en polyfills: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  3. changez app.module.ts, ajoutez tous nos composants dans entryComponents que nous voulons devenir des composants Web, nous devrons également modifier la configuration de bootstrap comme suit: https://github.com/playerx/angular-elements-sample/blob/ maître / src / app / app.module.ts
  4. changer main.ts comme ceci: 'https://github.com/playerx/angular-elements-sample/blob/master/src/main.ts'

C’est tout, nos composants angulaires standard sont devenus des composants Web.

Vous pouvez voir un exemple de travail à:

https://angular-elements-sample.now.sh

(code source: https://github.com/playerx/angular-elements-sample)

Alors qu'est-ce qui s'est passé ici:

  • Au lieu d'exporter et d'utiliser un composant racine d'application, nous pouvons maintenant avoir et utiliser plusieurs composants Web dans notre fichier index.html ou ailleurs.
  • Nos composants standard peuvent être des composants Web simplement en les enregistrant dans entryComponents

Quand j'ai découvert que je pensais si simple? oui, facile, mais ça n’est qu’un début de recherche!

Avant de passer à la partie suivante, voyons quels fichiers sont générés:

  • inline.bundle.js - c'est un petit script webpack pour charger des modules
  • vendor.bundle.js - bibliothèques angulaires et bibliothèques tierces
  • polyfills.bundle.js - polyfills
  • main.bundle.js - nos composants
  • styles.bundle.css - styles globaux, styles de matériaux par exemple

Comment utiliser les composants Web

Nous avons créé un composant Web appelé `app-like-button`, nous allons l’utiliser maintenant dans un autre projet absolument différent. Créons un autre projet angulaire et exécutons les étapes suivantes:

  1. installez @ webcomponents / custom-elements et importez-le en polyfills: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  2. activer les schémas personnalisés dans app.module.ts: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.module.ts
  3. commencez à utiliser notre nouveau composant Web comme ceci:
     Le composant sera chargé ici
  4. Charger les scripts de composant Web - permet de discuter de cette partie en détail

Charger des scripts de composant Web

nous devons charger les scripts suivants de notre premier projet:

  • inline.bundle.js - celui-ci créera une "portée isolée" des bibliothèques dont nous avons besoin pour les composants Web
  • vendor.bundle.js - bibliothèques angulaires et bibliothèques tierces utilisées pour les composants Web
  • main.bundle.js - les composants eux-mêmes

nous ne chargeons pas polyfills.bundle.js et styles.bundle.css et un peu plus tard à ce sujet.

dès que ces scripts seront chargés et injectés dans notre html, le composant bouton ressemblant à une application deviendra vivant, le "composant sera chargé ici" le texte sera remplacé par le composant lui-même. Pour la démonstration, j'ai créé un chargeur de script simple: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.component.ts

Vous pouvez consulter des exemples de travail complets à:

https://angular-webcomponents-usage-sample.now.sh/

(code source: https://github.com/playerx/angular-webcomponents-usage-sample)

Voyons maintenant quels avantages supplémentaires pouvons-nous tirer de la combinaison de composants Web et angulaires

Routage

Une des choses qui m'intéressait était d'utiliser un puissant routage angulaire dans mon composant Web. Il y avait un problème: je ne souhaitais pas utiliser le routage standard car il modifiait l'URL et je ne voulais pas que mon composant Web modifie l'URL. Il serait très difficile de gérer le routage global de cette façon.

Ce dont j’ai besoin, c’est de quelque chose qui permettra d’enregistrer les informations de routage en mémoire. C’est donc MockLocationStrategy, celle-ci est destinée aux tests mais répond parfaitement à mes besoins. Dans les projets de démonstration, vous pouvez voir le composant Web avec routage - "app-module-shell".

Je pense que si vous avez besoin de changer d'URL alors que le composant Web est en cours de routage, vous devez créer un événement et gérer le routage d'URL dans l'application principale.

Shadow Dom

Dans ces exemples, je n'ai pas créé d'encapsulation de vue native, la raison en est simple, la bibliothèque de matériaux ne le prend pas en charge pour l'instant (https://github.com/angular/material2/issues/3386), mais vous êtes libre de créer des composants. avec shadow dom, je l’ai essayé et cela fonctionne parfaitement

Theming

Voici mon préféré, si vous vous en souvenez, nous n’avons pas chargé styles.bundle.css dans notre nouvelle application. La raison est simple, nous ne voulions pas que le thème du composant Web soit le nôtre. Et oui, vous pouvez créer des composants Web avec une conception de matériau avec un thème et l’utiliser dans une autre application. Le thème de l’application sera appliqué. Consultez cet exemple:

création de composants Web - https://angular-elements-sample.now.sh

les utiliser dans une autre application - https://angular-webcomponents-usage-sample.now.sh

Découvrez l'app-module-shell après avoir cliqué sur «Charger le module».

Problèmes connus

  • Si vous souhaitez utiliser un composant Web dans un autre composant Web de la même application où des composants Web sont déclarés, ils seront rendus deux fois. Reason is simple Angular rend le composant et également son rendu en tant que composant Web. C’est un problème connu des équipes angulaires et je pense qu’il y aura bientôt une solution. Pour le moment, je peux suggérer les solutions suivantes:
     Disons que nous avons des modules clients et que nous souhaitons partager certains composants avec d'autres modules. La solution de contournement consiste à créer deux modules:
    1. clients-web-components - qui hébergera tous les composants Web
    2. clients-shell - qui les utilisera
    3. un autre module - qui utilisera également les composants Web du client

Résumer

J'ai essayé de montrer comment vous pouvez créer et utiliser la puissance de composants Web et angulaires ensemble. Il existe bien plus de scénarios qui peuvent être couverts en mélangeant ces deux choses étonnantes. Je n'en ai couvert que quelques-unes.

Vous devriez regarder la vidéo à la fin, c'était le premier éclat de mes recherches.

Aussi, voici les exemples de travail:

Création de composants Web - https://github.com/playerx/angular-elements-sample

Utilisation de composants Web - https://github.com/playerx/angular-webcomponents-usage-sample

Merci d'avoir lu :)