Implementazione di un'architettura plug-in / sistema plug-in / framework innestabile in Angular 2, 4, 5, 6

Aggiornamento del 24/05/2018: ora abbiamo +3 versioni di Angular dal mio post originale e non abbiamo ancora una soluzione definitiva realizzabile. Lars Meijdam (@LarsMeijdam) ha escogitato un approccio interessante che merita sicuramente una visita. (A causa di problemi proprietari, ha dovuto rimuovere temporaneamente il repository GitHub dove aveva originariamente pubblicato il suo campione. Tuttavia, è possibile inviargli un messaggio direttamente se si desidera una copia. Per ulteriori informazioni, consultare i commenti di seguito.)

I recenti cambiamenti architettonici in Angular 6 ci avvicinano a una soluzione. Inoltre, Angular Elements ( https://angular.io/guide/elements ) fornisce alcune funzionalità dei componenti, sebbene non sia esattamente quello che ho descritto in origine in questo post.

Se qualcuno del fantastico team angolare dovesse imbattersi in questo, si noti che sembrano esserci molte altre persone che sono anche molto interessate a questa funzionalità. Potrebbe valere la pena considerare per l'arretrato.

Vorrei realizzare un (plug-in) in un quadro pluggable Angular 2, Angular 4, Angular 5, o Angular 6applicazione.

(Il mio caso d'uso specifico per lo sviluppo di questo framework collegabile è che ho bisogno di sviluppare un sistema di gestione dei contenuti in miniatura. Per una serie di ragioni non necessariamente elaborate qui, Angular 2/4/5/6è quasi perfetto per la maggior parte delle esigenze di quel sistema.)

Per framework collegabile (o architettura plug-in), intendo specificamente un sistema che consente agli sviluppatori di terze parti di creare o estendere la funzionalità di un'applicazione primaria mediante l'uso di componenti collegabili senza avere accesso diretto o conoscenza del codice sorgente dell'applicazione primaria o meccanismi interni .

(Tale frase su " senza avere accesso diretto o conoscenza del codice sorgente dell'applicazione o del funzionamento interno " è un obiettivo fondamentale.)

Esempi di framework collegabili includono sistemi di gestione dei contenuti comuni come WordPresso Drupal.

La situazione ideale (come con Drupal) sarebbe quella di poter semplicemente posizionare questi componenti (o plug-in) collegabili in una cartella, fare in modo che l'applicazione li rilevi automaticamente o li scopra, e li faccia semplicemente "funzionare" magicamente. Far sì che ciò avvenga in una sorta di hot plug, il che significa che mentre l'app era in esecuzione, sarebbe ottimale.

Attualmente sto cercando di determinare le risposte ( con il tuo aiuto ) alle seguenti cinque domande.

1. Praticità: un framework di plugin per Angular 2/4/5/6un'applicazione è persino pratico? (Fino ad ora, non ho trovato alcun modo pratico per creare un framework veramente collegabile Angular2/4/5/6.)
2. Sfide attese: quali sfide si potrebbero incontrare nell'implementazione di un framework di plugin per Angular 2/4/5/6un'applicazione?
3. Strategie di implementazione: quali tecniche o strategie specifiche potrebbero essere impiegate per implementare un framework di plugin per Angular 2/4/5/6un'applicazione?
4. Best practice: quali sono le best practice per l'implementazione di un sistema di plugin per Angular 2/4/5/6un'applicazione?
5. Tecnologie alternative: se un framework di plug-in non è pratico in Angular 2/4/5/6un'applicazione, quali tecnologie relativamente equivalenti (ad esempio React) potrebbero essere adatte per un'applicazione Web moderna altamente reattiva ?

In generale, l'uso di Angular 2/4/5/6è molto desiderabile perché:

• è naturalmente estremamente veloce - incredibilmente così.
• consuma pochissima larghezza di banda (dopo il caricamento iniziale)
• ha un'impronta relativamente piccola (dopo AOTe tree shaking) e quell'impronta continua a ridursi
• è altamente funzionale e il team e la comunità angolari stanno continuando una rapida crescita del suo ecosistema
• gioca bene con molte delle migliori e più recenti tecnologie Web come TypeScripteObservables
• Angular 5 ora supporta gli operatori dell'assistenza ( https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7 )
• essendo sostenuto da Google, è probabile che sia supportato e migliorato bene in futuro

Mi piacerebbe molto usare Angular 2/4/5/6per il mio progetto attuale. Se sono in grado di utilizzare Angular 2/4/5/6, userò anche Angular-CLIe probabilmente Angular Universal(per il rendering sul lato server).

Ecco i miei pensieri, finora, riguardo alle domande sopra. Si prega di rivedere e fornire il proprio feedback e illuminazione.

• Angular 2/4/5/6le app consumano pacchetti, ma non è necessariamente la stessa cosa che consentire i plug-in all'interno di un'applicazione. Un plug-in in altri sistemi (ad es. Drupal) Può essere essenzialmente aggiunto rilasciando la cartella del plug-in in una directory di moduli comune dove viene automaticamente "prelevata" dal sistema. In Angular 2/4/5/6, un pacchetto (come potrebbe essere un plug-in) di solito viene installato tramite npm, aggiunto a package.jsone quindi importato manualmente nell'app - come in app.module. Questo è molto più complicato rispetto al Drupalmetodo di rilascio di una cartella e il rilevamento automatico del pacchetto da parte del sistema. Più è complicato installare un plugin, meno è probabile che le persone li usino. Sarebbe molto meglio se ci fosse un modo perAngular 2/4/5/6per rilevare e installare automaticamente i plugin. Sono molto interessato a trovare un metodo che consenta ai non sviluppatori di installare l' Angular 2/4/5/6applicazione e installare i plug-in scelti senza dover comprendere tutta l'architettura dell'applicazione.

• In generale, uno dei vantaggi di fornire un'architettura collegabile è che è molto facile per gli sviluppatori di terze parti estendere la funzionalità del sistema. Ovviamente, questi sviluppatori non avranno familiarità con tutte le complessità del codice per l'applicazione a cui si stanno collegando. Una volta sviluppati i plug-in, altri utenti ancora meno tecnici possono semplicemente installare l'applicazione e tutti i plug-in selezionati. Tuttavia, Angular 2/4/5/6è relativamente complicato e ha una curva di apprendimento molto lunga. Per ulteriori cose complicare, la maggior parte di produzione Angular 2/4/5/6delle applicazioni utilizzano anche Angular-CLI, Angular Universale WebPack. Qualcuno che sta implementando un plug-in dovrebbe probabilmente avere almeno una conoscenza di base di come tutti questi si adattano insieme - insieme a una solida conoscenza pratica diTypeScripte una ragionevole familiarità con NodeJS. I requisiti di conoscenza sono così estremi che nessuna terza parte vorrebbe mai sviluppare un plugin?

• La maggior parte dei plug-in avrà probabilmente alcuni componenti lato server (ad es. Per l'archiviazione / recupero di dati relativi ai plug-in) nonché alcuni output lato client. Angular 2/4/5in particolare (e fortemente) scoraggia gli sviluppatori dall'iniezione dei propri modelli in fase di esecuzione, poiché ciò comporta un grave rischio per la sicurezza. Al fine di gestire molti tipi di output che un plug-in può ospitare (ad esempio la visualizzazione di un grafico), sembra che sia probabilmente necessario consentire agli utenti di creare contenuto che viene iniettato nel flusso di risposta, in una forma un'altra. Mi chiedo come sia possibile soddisfare questa esigenza senza distruggere in modo figurato Angular 2/4/5/6i meccanismi di sicurezza.

• La maggior parte delle Angular 2/4/5/6applicazioni di produzione sono pre-compilate utilizzando la compilazione Ahead of Time( AOT). (Probabilmente tutto dovrebbe essere.) Non sono sicuro di come i plugin possano essere aggiunti (o integrati con) alle applicazioni precompilate. Lo scenario migliore prevede la compilazione dei plug-in separatamente dall'applicazione principale. Tuttavia, non sono sicuro di come farlo funzionare. Un fallback potrebbe essere la ricompilazione dell'intera applicazione con tutti i plug-in inclusi, ma ciò complica un po 'le cose per un utente amministrativo che desidera semplicemente installare l'applicazione (sul proprio server) insieme a tutti i plug-in selezionati.

• In Angular 2/4/5/6un'applicazione, specialmente pre-compilata, un singolo pezzo di codice errato o in conflitto può interrompere l'intera applicazione. Angular 2/4/5/6le applicazioni non sono sempre le più facili da eseguire il debug. L'applicazione di plugin mal comportati potrebbe provocare esperienze molto spiacevoli. Al momento non sono a conoscenza di un meccanismo per gestire con garbo plug-in mal funzionanti.

Ho creato un repository su github con una soluzione che potrebbe aiutare. Utilizza 6 librerie Angular e 1 applicazioni di base che caricano pigramente le librerie in bundle UMD; https://github.com/lmeijdam/angular-umd-dynamic-example

Se hai qualche suggerimento, non esitare ad aggiungere!

🛠️ Github demo angular -plugin-architecture

Forse Ivy può cambiare qualcosa, ma per ora uso la soluzione che utilizza Angular CLI Custom Builder e soddisfa i seguenti requisiti:

• AOT
• evitare il codice duplicato (pacchetti come @angular / core {common, form, router}, rxjs, tslib)
• usa la libreria condivisa in tutti i plug-in ma NON SPEDIRE le fabbriche generate da quella libreria condivisa in ogni plug-in ma piuttosto riutilizza il codice e le fabbriche della libreria
• lo stesso livello di ottimizzazione offerto dalla CLI angolare
• per importare i moduli esterni dobbiamo solo sapere una cosa: il loro percorso del file bundle
• il nostro codice dovrebbe riconoscere il modulo e inserire il plugin nella pagina
• supporta il rendering lato server
• caricare il modulo solo quando necessario

L'utilizzo è semplice come:

ng build --project plugins --prod --modulePath=./plugin1/plugin1.module#Plugin1Module 
         --pluginName=plugin1 --sharedLibs=shared --outputPath=./src/assets/plugins

Maggiori informazioni su questo nel mio articolo:

• Creazione di un'applicazione Enterprise innestabile dinamica estensibile con angolare

Ho appena pubblicato un nuovo capitolo per il mio libro " Sviluppare con Angular " che affronta l'argomento dei plugin in Angular 2+ e dovrebbe essere di grande interesse per le persone che stanno cercando di creare plugin esterni.

Punti chiave:

• plugin
• Creazione di componenti in base ai nomi di stringa
• Caricamento configurazione da fonti esterne
• Percorsi applicativi che cambiano in modo dinamico
• Plugin esterni
• Creazione di librerie di plugin
• Caricamento dei plugin nell'applicazione
• Percorsi dinamici con contenuto plug-in

Il libro è gratuito e ha il modello "paga quello che vuoi". Sentiti libero di prenderne una copia e spero che ti aiuti.

Esempio di applicazione con un sistema di plugin funzionante (grazie a Gijs per aver fondato il repository github!) Https://github.com/PacktPublishing/Mastering-Angular-2-Components/tree/master/angular-2-components-chapter-10 based sull'eBook Mastering Angular 2 Components

• architettura del plugin per estendere i componenti dell'app principale
• sistema di plug-in di file (per aggiungere semplicemente directory / file di plug-in senza modificare i file di configurazione di base o la necessità di ricompilare l'applicazione!)
• carica e usa dinamicamente i plugin
• creazione di un rudimentale gestore di plug-in per attivare / disattivare plug-in al volo

Saluti, Niklas

Quello che stai cercando è il caricamento del modulo pigro. Ecco un esempio: http://plnkr.co/edit/FDaiDvklexT68BTaNqvE?p=preview

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
    <a [routerLink]="['/']">Home</a> | 
    <a [routerLink]="['/app/home']">App Home</a> |
    <a [routerLink]="['/app/lazy']">App Lazy</a>

    <hr>
    <button (click)="addRoutes()">Add Routes</button>

    <hr>
    <router-outlet></router-outlet>
  `
})
export class App {
  loaded: boolean = false;
  constructor(private router: Router) {}

  addRoutes() {
    let routerConfig = this.router.config;

    if (!this.loaded) {
      routerConfig[1].children.push({
        path: `lazy`,
        loadChildren: 'app/lazy.module#LazyModule'
      });

      this.router.resetConfig(routerConfig);
      this.loaded = true;
    }
  }
}

Miglior ... Tom

Ho fatto un hack per caricare e compilare altri moduli in tempo di bootstrap, ma non ho risolto il problema delle dipendenze cicliche

 const moduleFile: any = require(`./${app}/${app}.module`),
                    module = moduleFile[Object.keys(moduleFile)[0]];

 route.children.push({
     path: app,
     loadChildren: (): Promise<any> => module
 });
 promises.push(this.compiler.compileModuleAndAllComponentsAsync(module));

quindi in AppModule aggiungi questo:

{
        provide: APP_INITIALIZER,
        useFactory: AppsLoaderFactory,
        deps: [AppsLoader],
        multi: true
},

Stavo cercando anche un sistema di plugin in 2/4 angolare per sviluppare un ambiente RAD per un'applicazione aziendale al lavoro. Dopo alcune ricerche, ho deciso di implementare una raccolta di componenti pseudo-angolari archiviati nel database (ma potrebbe trovarsi nel filesystem).

I componenti memorizzati nel database del database sono basati su ng-dynamic e l'implementazione del componente principale è simile a questa:

declare var ctx: any;

@Component({
    selector: 'my-template',
    template: `
<div>
    <div *dynamicComponent="template; context: { ctx: ctx };"></div>
</div>
  `,
    providers: [EmitterService],

})

export class MyTemplateComponent implements OnMount, AfterViewInit, OnChanges {


    // name
    private _name: string;
    get name(): string {
        return this._name;
    }
    @Input()
    set name(name: string) {
        this._name = name;        
        this.initTemplate();
    }

    template: string;
    ctx: any = null;

    private initTemplate() {

        this.templateSvc.getTemplate(this.name).subscribe(res => {
            // Load external JS with ctx implementation
            let promise1 = injectScript(res.pathJs);
            // Load external CCS
            let promise2 = injectScript(res.pathCss);

            Promise.all([promise1, promise2]).then(() => {

                // assign external component code
                this.ctx = ctx; //

                // sets the template
                this.template = res.template;

                this.injectServices();

                if (this.ctx && this.ctx.onInit) {
                    this.ctx.onInit();
                }

            });

        });

    }

Il codice javascript esterno è simile ai componenti angolari:

var ctx = {

// injected    
_httpService: {},
_emitterService: null,

// properies
model: {
    "title": "hello world!",
},


// events
onInit() {
    console.log('onInit');
},

onDestroy() {
    console.log('onDestroy');
},

onChanges(changes) {
    console.log('changes', changes);
},

customFunction1() {
    console.log('customFunction1');
},

childTemplateName: string = 'other-component'; 

};

E i modelli dei componenti sono come modelli angolari:

<a (click)="customFunction1()">{{ ctx.model.title }}</a>
<input [(ngModel)]="ctx.model.title" type="text" />

E potrebbe anche essere nidificato:

<a (click)="customFunction1()">{{ ctx.model.title }}</a>
<my-template [name]="childTemplateName"></my-template>

Sebbene non sia perfetto, gli sviluppatori dei componenti personalizzati hanno un framework simile a quello di angular2 / 4.

Può essere fatto "manualmente". Dato che il webpack non sa nulla del modulo esterno (plug-in), non può includerli in bundle. Quindi quello che ho fatto è guardare il codice generato dal webpack e ho trovato queste torte di codice in main.bundle.js:

var map = {
"./dashboard/dashboard.module": ["../../../../../src/app/dashboard/dashboard.module.ts","dashboard.module"]}; 

Esaminiamo cosa contiene quell'array:

1. "./dashboard/dashboard.module" - questo è l'URL di routing della strega del modulo che vogliamo caricare in modo pigro, ad esempio: {path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule'}
2. "../../../../../src/app/dashboard/dashboard.module.ts" - questo è il punto di ingresso (contraente) che prende da
3. "dashboard.module" : nome file effettivo senza chunk.js (ad esempio dashboard.module.chunk.js )

Quindi, in teoria, se aggiungi la voce alla proprietà map, configura il tuo routing e segui il modello, puoi avere un sistema plug-in. Ora la sfida è come aggiungere o rimuovere voci da quella proprietà della mappa. Ovviamente non può essere fatto da un codice angolare, dovrebbe essere fatto per uno strumento esterno.

Ho cercato di implementare un'architettura plug-in facendo uso di ABP, Angular e ASP.NET Core: https://github.com/chanjunweimy/abp_plugin_with_ui

Fondamentalmente, ho sviluppato plugin angolari usando diverse applicazioni angolari, quindi li aggiungo dinamicamente insieme.

Ulteriori informazioni su come lo raggiungo:

Ho 2 applicazioni angular-cli, 1 è la principale applicazione cli angolare e un'altra è l'applicazione cli angolare plug-in. Il problema che stiamo affrontando nell'approccio dell'architettura del plug-in Angular-cli è il modo in cui li integriamo.

Al momento, quello che ho fatto è stato eseguire ng-build su entrambe le applicazioni e inserirle in una cartella "wwwroot", che è stata quindi ospitata in un server ASP.NET core 2.0. Un repository più semplice che mostra questa idea è Angular Multiple App: https://github.com/chanjunweimy/angular-multiple-app

abp_plugin_with_ui è un repository che lavora allo sviluppo di un plugin che contiene sia il backend che il client angolare. Per il backend, ho fatto uso del framework aspnetboilerplate, che il frontend è sviluppato utilizzando un'applicazione multi-angolare.

Per integrare l'applicazione principale con l'applicazione plug-in, dobbiamo eseguire "ng-build" su entrambe le applicazioni (si noti che dobbiamo passare anche a href dell'applicazione plug-in), quindi spostiamo i contenuti predefiniti del plug-in applicazione cli angolare, nella cartella principale "wwwroot" dell'applicazione. Dopo aver raggiunto tutto ciò, possiamo quindi eseguire "dotnet run" per servire l'applicazione Web ASP.NET Core 2.0 per ospitare i file statici generati da "ng build".

Speriamo che aiuti. Qualsiasi commento è il benvenuto! ^^

Un po 'fuori tema, ma le librerie dei componenti dell'interfaccia utente potrebbero essere di interesse per alcuni lettori, che cercano plug-in:
https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the -angular-cli-e-ng-packagr-53b2ade0701e

NativeScript ha plug-in UI integrati:
https://docs.nativescript.org/plugins/building-plugins
Questi plug-in hanno bisogno di un wrapper angolare:
https://docs.nativescript.org/plugins/angular-plugin

Sono attualmente nella stessa ricerca che stai cercando di creare una versione collegabile / tematica di Angular, e non è un problema banale.

In realtà ho trovato Pretty Good Solutions, leggendo il libro Developing with Angular del Genius Denys Vuyika , in realtà sul libro spiega una soluzione abbastanza buona, parla dei plugin esterni nella pagina 356 del libro e usa Rollup.js per raggiungere il soluzione, quindi elabora per caricare dinamicamente plugin esterni che sono stati precedentemente creati al di fuori dell'applicazione.

Ci sono anche altre due librerie / progetti che ti aiutano a ottenere questo risultato ng-packagr e le estensioni Nx per Agnular (da Nrwl) che stiamo cercando di implementare quest'ultima, e direi che non è così fluido come avevamo previsto, angolare era semplice non costruito per quello, quindi dobbiamo aggirare alcuni dei core su come Angular, e i ppl NX sono uno dei migliori su di esso.

Siamo solo all'inizio del nostro progetto Open Source, stiamo usando Django + Mongo + Angular, (stiamo chiamando WebDjangular e uno dei nostri possibili approcci a questa risposta, è che Django dovrà scrivere alcuni file di configurazione JSON e costruire il applicazione ogni volta che un nuovo plugin o tema viene installato e attivato.

Ciò che abbiamo già realizzato è che dal database possiamo usare i tag per i componenti come nel plugin e il componente verrà stampato sullo schermo! Anche in questo caso il progetto è in fase molto precoce, basiamo un po 'la nostra architettura su Wordpress e abbiamo molti altri test da fare per realizzare il nostro sogno: D

Spero che il libro ti possa aiutare e, usando Rollup.js, so che sarai in grado di risolvere questo problema non banale.

Ho trovato un buon articolo di Paul Ionescu su come costruire un'applicazione estensibile plug-in in angolare.

https://itnext.io/how-to-build-a-plugin-extensible-application-architecture-in-angular5-736890278f3f

Fa anche riferimento a un'applicazione di esempio su github: https://github.com/ionepaul/angular-plugin-architecture