Gewusst wie: laden von dynamischen externen Komponenten in Eckigen Anwendung

Ich bin mit einem problem konfrontiert, mit Eckigen Anwendung.

Ich würde gerne eine angular Anwendung geschrieben, in Typscript bauen mit (aot).

Ziel ist die Anzeige eines Benutzer-dashboard mit einigen widgets. Ein widget ist ein Winkel-Komponente.

Meiner app kommt mit einigen eingebetteten widgets.
Aber widgets erweitert werden sollte, indem so etwas wie ein Marktplatz; oder manuell erstellt werden.

Den Markt kommen soll, die download-Dateien (js/ts/bunlde..??) in einen bestimmten Ordner.

Dann meine app sollte in der Lage sein laden Sie die neuen widgets (= ng-Komponente) und instantiieren Sie.

Meine Ordner-Struktur (Produktion)

  |- index.html
  |- main.f5b448e73f5a1f3f796e.bundle.js
  |- main.f5b448e73f5a1f3f796e.bundle.js.map
  |- .... (all other files generated)
  |- externalWidgets
      |- widgetA
            |- widjetA.js
            |- widjetA.js.map
            |- assets
                 |- image.png
      |- widgetB
            |- widjetB.ts
            |- widjetB.html
            |- widjetB.css

Dann beim laden der Seite Benutzer der Datenbank sagen, dass es eine widgetA.
Das Ziel ist also, um dynamisch Dateien laden und instantiieren Komponente enthalten.

Habe ich versucht, viele Lösungen, die mit "require" und "System.importieren", aber beides schlägt fehl, wenn der Pfad zur Last wird dynamisch generiert.

Ist, sollte dies möglich sein ?
Ändern kann ich meine code-Struktur; ändern Sie externe widgets.. (zum Beispiel widgetB ist noch nicht transpiled,...)

In der Tat, ich bin auf der Suche nach einem "plugin-system" mit einer Angular4/webpack Anwendung.

InformationsquelleAutor jano42 | 2017-08-04
  1. 17

    Ich mache genau das gleiche. Und ich erkläre die details in dieser Vortrag bei NgConf.

    Das erste, was zu verstehen ist, dass Webpack nicht dynamisch Module laden, die unbekannt sind während der Bauzeit. Dies ist inhärent in der Art und Weise Webpack baut Abhängigkeitsstruktur und sammelt Module-IDS während der Bauzeit. Und es ist völlig in Ordnung, da Webpack ist ein Module bundler, nicht Module loader. So müssen Sie verwenden ein Modul, loader und ist die einzige praktikable option ist jetzt SystemJS.

    Dann jedes plugin sollte als Modul verpackt und alle exportierten Komponenten Hinzugefügt werden sollten, die entryComponents des Moduls.

    Während der Laufzeit geladen werden, das Modul zu erhalten Zugang zu den deklarierten Komponenten im inneren, wenn es. Sie brauchen nicht wirklich ein Modul, aber das ist eine Einheit von Verpackung in Winkel, so dass Sie nicht vermeiden können, es zu benutzen. Nun, wenn man einmal ein Modul, müssen Sie Optionen, je nachdem, ob das Modul gebaut mit AOT oder nicht.

    Wenn es gebaut ist mit AOT, bekommst du nur die exportierten factory-Klasse aus dem Modul, und erstellen Sie eine Modul-Instanz:

    System.import('path/to/module').then((module)=>{
    const moduleFactory = module.moduleFactoryClassName;
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

    Wenn es nicht gebaut AOT, Sie haben, um es zu kompilieren mit JIT-compiler:

    System.import('path/to/module').then((module)=>{
    const moduleFactory = this.compiler.compileModuleSync(module.moduleClassName);
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

    Dann können Sie dynamische Komponenten, wo immer Sie wollen mit Hilfe von Techniken in diesem Artikel beschrieben: Hier ist was Sie wissen müssen über dynamische Komponenten in Eckige

    • Ihr Ansatz ist sehr interessant, ist das möglich mit diesem Weg zu importieren, remotely hosted-Komponente/ - Modul ?
    • ja, aber Sie müssen verwenden SystemJS für das
    • toll, dass könnte den trick tun für mich ! hast du irgendein Beispiel, wie Integration systemJs und webpack ? Und ein Beispiel von einem System.import von remote-Komponente ?
    • verwenden Sie eckige-cli?
    • Ja ich weiß, sollte ich etwas anderes verwenden ?
    • erstellen Sie eine neue Frage und poste hier eine Frage, ich werde schauen später
    • Danke @AngularInDepth.com hier ist er : stackoverflow.com/questions/46321477/...
    • Es ist nicht möglich, Sie zu kombinieren SystemJs mit Winkel-Cli. Bin ich falsch? @AngularInDepth.com
    • Sie können nicht laden Sie ein umd-Bibliothek erstellt, die von rollup-und geladen, wie ein Skript, weil es nicht in der Lage zu finden, Ihre eigenen Winkel-Klassen @AngularInDepth.com
    • es hängt davon ab, wie Sie bundle alles zusammen. Wenn Sie das bundle im UMD-bundle, SystemJS wird es abholen
    • das problem ist nur, dass die Winkel nicht in der Lage zu lösen, den Pfad, wo die Bibliothek ist, zum Beispiel @eckig/core
    • Hallo nochmal, ich habe es erstellt ein repository mit den Fortschritten in diesem Thema, aber ich habe eine Fehlermeldung, dass ich nicht in der Lage bin zu lösen. Könnten Sie mir helfen? github.com/xino1010/angular-external-modules
    • kannst du vielleicht erstellen Sie eine separate Frage mit details?
    • natürlich @AngularInDepth.com stackoverflow.com/questions/47312031/...
    • Sie verwenden CLI-Paket als UMD zu ? oder sind Sie, dies nicht zu tun? und wenn nicht, wie würden Sie behandeln die Hersteller, inline-und Haupt-bundle-Dateien? Gibt es irgendwelche Fortschritte auf diesem bereits?
    • Dann jedes plugin sollte als Modul verpackt und alle exportierten Komponenten Hinzugefügt werden sollten, die entryComponents des Moduls. - Ist das als UMD? @AngularInDepth.com
    • Btw schöne Lösung, aber AComponent ist nicht "bekannt" aber wie können Sie also stellen Sie dann einen harten Verweis auf seine Klasse name? Dank
    • Ich bin nicht mit CLI. Aber die neueren CLI-sollte-Bibliothek Unterstützung. Ich habe nicht sah es noch. Ja, AComponent ist nicht bekannt, so dass die Komponenten sollten definiert werden, als Anbieter und später wieder aus dem Injektor. Sehen Sie dieses sprechen, dieses Konzept youtube.com/watch?v=pERhnBBae2k
    • Danke! Schon in meiner später ansehen! klar, habe ich eigentlich bemerkt, beim erstellen der app für die Produktion ist es immer noch chunk-Dateien mit der Verwendung des Winkel-cli. Ich bin versucht zu verlängern routing mit loadChildren und dann system.importieren, aber das ist die Schaffung von chunk-Dateien (die ich auch nicht will), versuche ich jetzt über http.man holt sich den umd-bundle und fügen Sie es dynamisch, aber loadChildren ist nicht zu akzeptieren, dass 🙁
    • Interessanten Vortrag von Ihnen gemacht wird! schön zu sehen, Sie stecken viel Aufwand in ein reverse engineering dieser Lademechanismus. Ich Frage mich, wenn Sie mit Herausforderungen konfrontiert zu injizieren extension Module während der Laufzeit (durch die Verlängerung der route mit einem neuen loadChildren) nach dem hinzufügen der .js-Dateien in den index.html (in der runtime) ?
    • Der Grund warum ich Frage ist, weil die Firma für die ich arbeite schafft 'enthalten' software läuft on-premise, Sie erweitern möchten regelmäßig, aber nicht wollen, zu 'kompilieren' die gesamte Anwendung on-premise
    • um injizieren eine neue route, die Sie verwenden müssen resetRoute API. Ich hoffe, ich werde Zeit finden, einen Artikel zu schreiben, irgendwann in der Zukunft.
    • Vielen Dank für Ihre Antwort! Ich habe versucht, und verwenden, in der Tat! und seine Arbeit, nur ist beim Aufbau der Anwendung ist das erstellen von chunk-Dateien für jede route in der erwähnten loadchildren von resetConfig(), das ist etwas, was ich nicht will, weil es sein könnte, ein Modul, das nicht 'dort' noch, die ich gefunden habe, stackoverflow.com/questions/48590455/... in der Zwischenzeit zum ausprobieren! Danke!
    • Ich erstellte ein repository auf github mit einer Lösung, die helfen könnte. Sie verwendet Eckige 6-Bibliotheken und 1 Basis-Anwendungen, die das laden der UMD gebündelt Bibliotheken träge; github.com/lmeijdam/angular-umd-dynamic-example, Wenn Sie irgendwelche Vorschläge haben, bitte fühlen Sie sich frei, hinzuzufügen! PS: es ist bei weitem nicht perfekt, aber es ist zumindest laden "unbekannten" Bibliotheken während der Laufzeit. Brauchen, um für ein 'eval' alternative

    InformationsquelleAutor Maxim Koretskyi
Schreibe einen Kommentar