Créer une véritable architecture de plugin avec angular ivy

Question

Je travaille sur un projet où nous voulons construire un frontend web en utilisant une "vraie" architecture de plugin. Qu'est-ce que je veux dire par "vraie" ?

Imaginez une application web pour la configuration. L'interface de cette application peut changer dynamiquement car nous sommes en mesure d'installer des fonctionnalités en cours d'exécution. Nous sommes donc en mesure d'ajouter de nouvelles fonctionnalités au moment de l'exécution. Mon idée est d'avoir une interface utilisateur simple qui peut charger plusieurs plugins. Ces plugins peuvent être chargés dans cette interface simple sous forme de pages individuelles.

Au moment où je compile cette interface simple pour la configuration, je ne connais pas les plugins qui seront installés ultérieurement. Malheureusement. Mon idée est d'avoir une API de repos qui fournit les plugins (peut-être en tant que modules webpack ?) et que l'interface utilisateur simple chargera simplement ces plugins au démarrage.

J'ai fait quelques recherches aujourd'hui et je ne suis pas sûr qu'il soit possible de faire quelque chose comme ça avec angular Ivy. Comme je ne suis pas un expert, peut-être que quelqu'un pourrait répondre à cette question, avant que je ne creuse davantage.

Est-il possible de créer des composants angulaires qui ne sont pas connus de l'application au moment de la compilation mais qui sont chargés ultérieurement via un backend ?

Merci pour cette courte réponse

Meilleures salutations

Answer 1

Il est possible de charger un composant qui a été compilé séparément de l'application principale sur laquelle vous travaillez et de le charger au moment de l'exécution. Il y a cependant quelques inconvénients.

Prenons le cas où vous avez pré-rendu 5 plugins différents à votre application principale pour qu'elle les consomme. Vous avez ces fichiers .js compilés et regroupés que vous servez à partir d'un serveur à la demande. Angular est mis à jour de 8 -> Angular 9 (juste un exemple) et Angular 9 a des changements de rupture de sorte qu'il n'est plus compatible avec 8 (dans lequel vos plugins ont été créés).

Vos plugins seront rendus inutiles si vous mettez à jour votre application principale sans recompiler et corriger tous vos plugins, ce qui peut être un problème si vous n'avez pas créé les plugins vous-même.

Answer 2

Est possible.

1. Compilez votre plug-in à l'aide de la bibliothèque [1] : https://angular.io/guide/creating-libraries

2. Créer un composant ou une directive ajouter au constructeur

   constructor(private router: Router, private _injector: Injector, ... ) { ... }

3. Charger le plugIn

   @AngularCore.ViewChild('customContent', { read: ToolDirective, static: true })

   customContent: ToolDirective;

   loadTool(_Library: string) { this.selectedNode = node; this.opened = false;

   const tool = Tools[node.tipo];
   const library: string = tool.library;
   
   fetch(library)
     .then(response => response.text())
     .then(source => {
       const exports = {}; // this will hold module exports
       const modules = {   // this is the list of modules accessible by plugin
         '@angular/core': AngularCore,
         '@angular/common': AngularCommon,
       };
   
       const require = (module) => modules[module]; // shim 'require'
   
       //source = source.replace(/\/\/# sourceMappingURL=.*/g, `//# sourceMappingURL=${library}.map`)
       eval(source); // interpret the plugin source
       let _module = _library
   
       const mwcf = this.compiler.compileModuleAndAllComponentsSync(exports[`${_module}Module`]);
   
       var __module = mwcf.ngModuleFactory.create(this._injector);
   
       const componentFactory = mwcf.componentFactories
         .find(e => e.selector === `lib-${_library}`); // find the entry component
       if (componentFactory) {
         this.openTool = true;
         this.customContent.viewContainerRef.clear();
   
         const componentRef = this.customContent.viewContainerRef.createComponent(componentFactory);
         componentRef.instance.data = { ...CustomInitialData.. };
         componentRef.instance.mwcf = mwcf;
   
       }
   
     });

   }

Ecrivez-moi pour toute aide