web-dev-qa-db-fra.com

comment intégrer une application angular dans une autre application?

Mon équipe a développé une application angular 5 déjà en production depuis un certain temps, mais nous avons récemment été chargée de la faire fonctionner dans les trois autres sites de l'entreprise. Un site est un SPA. construit avec Angular6, other est également un SPA mais utilise Angular5, tandis que l’autre utilise des bibliothèques plus anciennes telles que jQuery.

La direction souhaitant intégrer immédiatement Angular5 SPA, nous avons simplement exporté l’application entière sous forme de module avec des itinéraires enfants et laissé l’autre application se charger du bootstrap.

Mais je crains que l'approche ci-dessus ne fonctionne pas pour le site non angulaire. Cela permet également de serrer les deux applications, car l’application 'Host' doit connaître toutes les dépendances de notre application, ce qui n’est pas une application triviale (je dirais que c’est plutôt gros) et les installer, ce qui a posé des problèmes lorsque les deux applications avaient besoin de versions différentes de même dépendance, sans mentionner que nous devrons nous synchroniser lors de la mise à niveau des dépendances ou du framework lui-même. Je ne pense pas que cette approche évoluera lors de l'intégration de l'application dans plus de sites.

Ma première idée pour une implémentation plus générale consistait à mettre à niveau notre application vers Angular 6 et à créer un composant Web avec un élément personnalisé, mais nous devons prendre en charge IE11 et Edge, qui ne prennent pas en charge l’encapsulation native. Nous aurions donc besoin de tester notre application sur tous les sites où elle est utilisée, pour nous assurer qu'elle ne casse pas nos styles. Je ne sais pas non plus si un composant Web peut gérer des itinéraires enfants ou non.

Une autre idée est d'utiliser un iframe mais mon problème ici est le redimensionnement de l'iframe à adapter au contenu et comment ajouter des itinéraires enfants dans l'application 'Hôte' à partir de l'application 'résident' à l'intérieur de l'iframe.

Existe-t-il un meilleur moyen de réaliser ce que nous devons faire?

La solution idéale devrait permettre à notre application d'être utilisée sur plusieurs sites (chacun offrant une configuration spécifique) sans que nous ayons à connaître le site à l'aide de notre application.

Merci de votre aide.

angulariframearchitecturesingle-page-applicationmicro-frontend
16
Jorge Riv

Le sujet m'a beaucoup occupé ces derniers temps, car beaucoup ont le même problème encore et encore (moi, bien sûr). De nos jours, vous entendez souvent le concept de micro-interfaces. Le concept consiste à concevoir que l'interface soit extensible et évolutive. Surtout à l’époque où de nombreuses entreprises ont à la fois angulaire et réagir et Développeurs Vue . Les approches suivantes sont issues de mes recherches:

Liens :

Vous pouvez créer votre nouvelle application et créer un lien hypertexte à partir de votre ancienne application. (Vous devez recharger une page lorsque vous basculez entre les deux applications.)

Iframes :

un architecte logiciel a construit un méta-routeur pour traiter les iframes et les applications à page unique
Regarde ça:

Metaframeworks :

Metaframeworks vous permet d'avoir une communication entre differents applications construites à l'aide de différents cadres:
voici quelques exemples de metaframeworks à des fins microfrontend .

Composants Web c’est-à-dire Angular :

Pour traiter les paquets npm, vous pouvez utiliser l’autre répondeur qui a mentionné le concept de éléments angulaires . Vous devez créer une application Shell et une autre application indépendante qui seront enregistrées en tant qu'éléments dans votre application Shell. Jetez un oeil à cet exemple .: Building micro frontends - angular elements

Mosaiq: Service d'agencement

La boutique en ligne Zalando a été confrontée au même problème et a créé un cadre permettant de le traiter:

En particulier la partie Tailor.js , un système open source permettant d’assembler les composants à la demande sur une couche dorsale écrite en Allez .

PS Tailor a été inspiré par BigPipe: pages Web en pipeline pour des performances élevées de Facebook.

Architecture de plugin

Une architecture de plug-in est une architecture qui appelle du code externe à certains endroits sans connaître à l'avance tous les détails de ce code.

Cette question Stackoverflow en expliquer plus en cas d'application d'une seule page:

Bibliothèques angulaires

Je pense qu'une bonne façon est d'avoir dans une application le même cadre et la même version de ce cadre (par exemple Angular 7). Je préférerais prendre le temps de faire une mise à niveau vers un TypeScript J'espère que la réponse peut être utile pour les autres.

Autres questions et réponses relatives à Stackoverflow :

Vue.JS - approche micro frontale
Conseil en architecture micro frontale

Exemples de micro-interfaces

Liste de ressources sur les micro-interfaces

https://github.com/billyjov/microfrontend-resources

16
billyjov

Je pense que la solution de votre problème réside dans Angular Elements. C’est plutôt cool et fourni par angular.

Angular Elements vous permet de conditionner vos composants Angular sous la forme custom web elements, qui font partie de l’ensemble des composants Web des API de la plate-forme Web. Les composants Web sont des technologies permettant de créer, encapsulated elements. À l'heure actuelle, cela inclut le DOM fantôme, les modèles HTML, les importations HTML et les éléments personnalisés. La technologie des éléments personnalisés donne le pouvoir à Angular Elements.

Voici quelques liens de référence à partir desquels vous pouvez en apprendre davantage sur Angular Elements.

https://angular.io/guide/elements

https://www.telerik.com/blogs/getting-started-with-angular-elements

Merci!

9
Shreenil Patel

Je crois que les Angular 6 éléments vont être votre seule option pour les applications non angulaires. C’est la seule méthode dont je suis au courant qui permette l’exécution de composants en dehors d’angular.

Afin de maintenir votre style d'encapsulation, vous pouvez utiliser le préfixe css:

:Host

dans les fichiers .css ou .scss de votre composant.

Si vous pouviez vous débarrasser de l'exigence non angulaire, je recommanderais le Angular CDK PortalHost et DomPortalHost.

0
JBoothUA