Composer une grande application Angular 2 avec plusieurs petites applications dans

Après 3 mois de débat et de recherche sur le choix entre React (avec Redux) et Angular 2, l'équipe front-end de mon entreprise a décidé de choisir Angular 2 (étant donné qu'elle convient mieux à notre problème).

Nous sommes dans le domaine des applications d'entreprise, qui comprend actuellement de nombreuses technologies frontales différentes (tout en ayant RESTful complet), et nous voulions tout remplacer et disposer d'une technologie unique pour faciliter la formation future et le contrôle de la qualité.

Étant donné la nature de notre produit, il est vaste et contient des modules, qui sont en soi un domaine différent et peuvent être créés en tant qu'application autonome, mais le produit lui-même vit dans une seule URL.

Exemple;

Appelons mon produit SuperApp.

En tant qu'interface utilisateur, SuperApp dispose d'un système de connexion standard et d'une navigation vers les modules / sous-produits enfants, de sorte que le flux de travail s'affiche comme suit.

• SuperApp

  • Authentifier l'utilisateur
  • Assistant Oublier le mot de passe
  • Page publique accessible sans authentification

  • Utilisateur authentifié

    • Système de navigation

      • Accueil
        • Sous-produit1
        • Sous-produit2
        • Sous-produit3

      • Profil

        ...

        ...

      • Groupes

        ...

        ...

Notez que dans la représentation ci-dessus, Sub-product1et Sub-product2sont deux domaines entièrement différents, ayant des domaines commerciaux entièrement différents.

Ce à quoi je peux penser en ce moment, c'est que je peux créer SuperApp en tant que projet Angular 2 unique ayant uniquement des composants et des vues qui sont pertinents pour lui-même, et SuperApp est également responsable du chargement de plusieurs applications enfants; Sub-product1, Sub-product2(Encore une fois, différents 2 angulaires des projets, ayant leur propre package.json, webpackconfiguration, etc.) via des composants-muets, et agir comme une coquille qui assure le routage de haut niveau et un espace réservé pour tenir les applications de l' enfant.

Une fois Sub-product1chargé dans le shell, il ajoutera ses propres routes à la route actuelle sur laquelle SuperApp a atterri.

La raison pour laquelle je veux la séparation est parce que ces différentes applications (qui sont actuellement construites à l'aide d'ExtJS) ont des équipes dédiées qui y travaillent (nous sommes une entreprise de plus de 500 développeurs), donc s'ils ont leurs propres projets Angular, ils peuvent gérer leurs outils et les dépendances à leur goût sans dépendre de l'application grand-parent.

Mais je ne peux trouver nulle part dans les documents Angular officiels ou sur le Web que la possibilité d'avoir des applications Angular imbriquées est possible (de telle manière que le code cadre est partagé tandis que les dépendances des applications enfants sont complètement isolées et chargées uniquement lorsque l'application en a besoin), ou s'il existe une autre approche pour résoudre un tel problème.

Tout conseil ou même des liens vers des articles pertinents seront appréciés.

Ce que vous décrivez, je le sais par le module therm. Je vais donc faire référence à est en tant que tel.

Je ne vais pas aborder la question de savoir si oui ou non les modules de support angulaire par manque de connaissances sur le framework. De plus, à mon avis, vous ne voulez pas vraiment cela. À ma connaissance, et je m'attends à ce que votre back-end reflète, vous voulez tout couper dans les moindres bits que vous pouvez ( micro-services ).

Dans ce cas, chaque point de votre diagramme doit être sa propre application indépendante. Ils doivent bien sûr communiquer entre eux, selon chaque responsabilité de composer la vue que vous avez décrite. Vous avez vu comment Google a une URL / un outil / un système séparé pour authentifier? Gmail ne se soucie pas de cela car ce n'est pas de sa responsabilité. Même le skining de tous les outils est central au lieu d'être situé dans chaque outil (vous le voyez sur la conception des matériaux). Les actifs vivent en dehors de chaque projet / système.

Vous obtenez ainsi un levier plus élevé de réutilisabilité et de flexibilité de vos systèmes. Bien que dans les petites équipes, cela est intenable en raison de la complexité et du temps. Maintenant, c'est à vous de déterminer où se situe votre dossier. Le tout dans les micro services et la séparation, le tout dans un seul paquet ou quelque part au milieu. Et les modules, s'ils sont disponibles, sont quelque chose que vous utiliseriez à l'intérieur de chaque point.

Une option: vous pouvez "lier en dur" (au lieu d'utiliser des liens SPA) aux sous-applications et faire en sorte que chaque sous-application partage une dépendance pour l'encapsuleur de site.