Update 24.05.2008: Wir sind jetzt +3 Versionen von Angular aus meinem ursprünglichen Beitrag und haben noch keine endgültige praktikable Lösung. Lars Meijdam (@LarsMeijdam) hat einen interessanten Ansatz entwickelt, der auf jeden Fall einen Blick wert ist. (Aufgrund von proprietären Problemen musste er das GitHub-Repository, in dem er sein Beispiel ursprünglich veröffentlicht hatte, vorübergehend entfernen. Sie können ihm jedoch direkt eine Nachricht senden, wenn Sie eine Kopie wünschen. Weitere Informationen finden Sie in den Kommentaren unten.)
Die jüngsten architektonischen Änderungen in Angular 6 bringen uns einer Lösung näher. Darüber hinaus bietet Angular Elements ( https://angular.io/guide/elements ) einige Komponentenfunktionen - allerdings nicht ganz das, was ich ursprünglich in diesem Beitrag beschrieben habe.
Wenn jemand aus dem erstaunlichen Angular-Team darauf stößt, beachten Sie bitte, dass es anscheinend viele andere Personen gibt, die ebenfalls sehr an dieser Funktionalität interessiert sind. Es könnte durchaus sinnvoll sein, über den Rückstand nachzudenken.
Ich möchte eine steckbare (Plug-in) Rahmen in einer implementieren Angular 2
, Angular 4
, Angular 5
, oder Angular 6
Anwendung.
(Mein spezieller Anwendungsfall für die Entwicklung dieses steckbaren Frameworks ist, dass ich ein Miniatur-Content-Management-System entwickeln muss. Aus einer Reihe von Gründen, die hier nicht unbedingt erläutert werden, Angular 2/4/5/6
ist es nahezu perfekt für die meisten Anforderungen dieses Systems geeignet.)
Mit steckbarem Framework (oder Plug-in-Architektur) meine ich speziell ein System, mit dem Entwickler von Drittanbietern die Funktionalität einer primären Anwendung mithilfe steckbarer Komponenten erstellen oder erweitern können, ohne direkten Zugriff auf oder Kenntnis des Quellcodes der primären Anwendung zu haben oder Innenleben .
(Diese Formulierung über " ohne direkten Zugriff auf oder Kenntnis des Quellcodes oder des Innenlebens der Anwendung " ist ein zentrales Ziel.)
Beispiele für steckbare Frameworks sind gängige Content-Management-Systeme wie WordPress
oder Drupal
.
Die ideale Situation (wie bei Drupal) wäre, diese steckbaren Komponenten (oder Plug-Ins) einfach in einen Ordner zu legen, sie von der Anwendung automatisch erkennen oder erkennen zu lassen und sie einfach magisch "funktionieren" zu lassen. Dies auf eine Art Hot-Plug-fähige Weise geschehen zu lassen, dh während die App ausgeführt wurde, wäre optimal.
Ich versuche derzeit, Antworten ( mit Ihrer Hilfe ) auf die folgenden fünf Fragen zu ermitteln.
Angular 2/4/5/6
Praktikabilität : Ist ein Plugin-Framework für eine Anwendung überhaupt praktikabel? (Bis jetzt habe ich keinen praktischen Weg gefunden, um ein wirklich steckbares Framework mit zu erstellenAngular2/4/5/6
.)- Erwartete Herausforderungen: Welche Herausforderungen können bei der Implementierung eines Plugin-Frameworks für eine
Angular 2/4/5/6
Anwendung auftreten? - Implementierungsstrategien: Welche spezifischen Techniken oder Strategien könnten zur Implementierung eines Plugin-Frameworks für eine
Angular 2/4/5/6
Anwendung verwendet werden? - Best Practices: Was sind die Best Practices für die Implementierung eines Plugin-Systems für eine
Angular 2/4/5/6
Anwendung? - Alternative Technologien: Wenn ein Plugin-Framework in einer Anwendung nicht praktikabel ist
Angular 2/4/5/6
, welche relativ äquivalenten Technologien (z. B.React
) könnten für eine moderne hochreaktive Webanwendung geeignet sein ?
Im Allgemeinen ist die Verwendung von Angular 2/4/5/6
sehr wünschenswert, weil:
- es ist natürlich extrem schnell - unglaublich.
- es verbraucht sehr wenig Bandbreite (nach dem ersten Laden)
- es hat einen relativ kleinen Platzbedarf (nach
AOT
undtree shaking
) - und dieser Platzbedarf schrumpft weiter - Es ist hochfunktional und das Angular-Team und die Community wachsen weiterhin rasant in ihrem Ökosystem
- Es spielt sich gut mit vielen der besten und neuesten Webtechnologien wie
TypeScript
undObservables
- Angular 5 unterstützt jetzt Servicemitarbeiter ( https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7 )
- Wenn es von unterstützt wird
Google
, wird es wahrscheinlich auch in Zukunft unterstützt und verbessert
Ich würde es sehr gerne Angular 2/4/5/6
für mein aktuelles Projekt verwenden. Wenn ich in der Lage bin zu verwenden Angular 2/4/5/6
, werde ich auch verwenden Angular-CLI
und wahrscheinlich Angular Universal
(für serverseitiges Rendern.)
Hier sind meine bisherigen Gedanken zu den obigen Fragen. Bitte überprüfen Sie und geben Sie Ihr Feedback und Ihre Erleuchtung.
Angular 2/4/5/6
Apps verbrauchen Pakete - dies ist jedoch nicht unbedingt dasselbe wie das Zulassen von Plugins innerhalb einer Anwendung. Ein Plugin in anderen Systemen (z. B.Drupal
) kann im Wesentlichen hinzugefügt werden, indem der Plugin-Ordner in einem allgemeinen Modulverzeichnis abgelegt wird, in dem er vom System automatisch "aufgenommen" wird. InAngular 2/4/5/6
wird ein Paket (wie es ein Plugin sein könnte) normalerweise über installiertnpm
, hinzugefügtpackage.json
und dann manuell in die App importiert - wie inapp.module
. Dies ist viel komplizierter als dasDrupal
Löschen eines Ordners und das automatische Erkennen des Pakets durch das System. Je komplizierter die Installation eines Plugins ist, desto unwahrscheinlicher ist es, dass Benutzer es verwenden. Es wäre viel besser, wenn es einen Weg dafür gäbeAngular 2/4/5/6
um Plugins automatisch zu erkennen und zu installieren. Ich bin sehr daran interessiert, eine Methode zu finden, mit der Nicht-Entwickler dieAngular 2/4/5/6
Anwendung installieren und ausgewählte Plugins installieren können, ohne die gesamte Architektur der Anwendung verstehen zu müssen.Im Allgemeinen besteht einer der Vorteile der Bereitstellung einer steckbaren Architektur darin, dass es für Entwickler von Drittanbietern sehr einfach ist, die Funktionalität des Systems zu erweitern. Offensichtlich sind diese Entwickler nicht mit allen Feinheiten des Codes für die Anwendung vertraut, in die sie einstecken. Sobald die Plugins entwickelt sind, können andere, noch weniger technische Benutzer einfach die Anwendung und alle ausgewählten Plugins installieren. Ist
Angular 2/4/5/6
jedoch relativ kompliziert und hat eine sehr lange Lernkurve. Um weiter komplizieren Dinge, die meisten ProduktionAngular 2/4/5/6
nutzen Anwendungen auchAngular-CLI
,Angular Universal
undWebPack
. Jemand, der ein Plugin implementiert, müsste wahrscheinlich zumindest einige Grundkenntnisse darüber haben, wie all diese zusammenpassen - zusammen mit einem starken Arbeitswissen überTypeScript
und eine vernünftige Vertrautheit mitNodeJS
. Sind die Wissensanforderungen so extrem, dass kein Dritter jemals ein Plugin entwickeln möchte?Die meisten Plugins verfügen wahrscheinlich über eine serverseitige Komponente (z. B. zum Speichern / Abrufen von Plugin-bezogenen Daten) sowie über eine clientseitige Ausgabe.
Angular 2/4/5
Insbesondere (und nachdrücklich) wird Entwickler davon abgehalten, zur Laufzeit eigene Vorlagen einzufügen, da dies ein ernstes Sicherheitsrisiko darstellt. Um viele Arten von Ausgaben zu verarbeiten, die ein Plugin aufnehmen kann (z. B. Anzeige eines Diagramms), scheint es wahrscheinlich erforderlich zu sein, Benutzern das Erstellen von Inhalten zu ermöglichen, die in einer anderen Form in den Antwortstrom eingefügt werden. Ich frage mich, wie es möglich sein könnte, diesem Bedarf gerecht zu werden, ohne dieAngular 2/4/5/6
Sicherheitsmechanismen im übertragenen Sinne zu vernichten .Die meisten Produktionsanwendungen
Angular 2/4/5/6
werden mitAhead of Time
(AOT
) compilation vorkompiliert . (Wahrscheinlich sollte alles so sein.) Ich bin mir nicht sicher, wie Plugins zu vorkompilierten Anwendungen hinzugefügt (oder in diese integriert) werden könnten. Das beste Szenario wäre das Kompilieren der Plugins getrennt von der Hauptanwendung. Ich bin mir jedoch nicht sicher, wie ich das schaffen soll. Ein Fallback könnte darin bestehen, die gesamte Anwendung mit den enthaltenen Plugins neu zu kompilieren. Dies erschwert jedoch die Verwaltung für einen Administrator, der die Anwendung einfach (auf seinem eigenen Server) zusammen mit ausgewählten Plugins installieren möchte.In einer
Angular 2/4/5/6
Anwendung, insbesondere einer vorkompilierten, kann ein einzelner fehlerhafter oder widersprüchlicher Code die gesamte Anwendung beschädigen.Angular 2/4/5/6
Anwendungen sind nicht immer am einfachsten zu debuggen. Die Anwendung von Plugins mit schlechtem Benehmen kann zu sehr unangenehmen Erfahrungen führen. Mir ist derzeit kein Mechanismus bekannt, mit dem schlecht benommene Plugins ordnungsgemäß behandelt werden können.
quelle
Antworten:
Ich habe ein Repository auf Github mit einer Lösung erstellt, die helfen könnte. Es verwendet Angular 6-Bibliotheken und 1 Basisanwendungen, die die gebündelten UMD-Bibliotheken träge laden. https://github.com/lmeijdam/angular-umd-dynamic-example
Wenn Sie Vorschläge haben, können Sie diese gerne hinzufügen!
quelle
🛠️ Github Demo Angular -Plugin-Architektur
Vielleicht kann Ivy etwas ändern, aber vorerst verwende ich die Lösung, die Angular CLI Custom Builder verwendet und die folgenden Anforderungen erfüllt:
Die Verwendung ist einfach wie folgt:
Mehr dazu in meinem Artikel:
quelle
OAuthToken
zur Laufzeit von unserer Haupt-App an den Bibliotheksdienst übergeben?InjectionToken
, der im AppModule bereitgestellt und in andere Plugins eingefügt wird. Vielen Dank!Ich habe gerade ein neues Kapitel für mein Buch " Entwickeln mit Angular " veröffentlicht, das sich mit dem Thema Plugins in Angular 2+ befasst und für Leute von großem Interesse sein sollte, die versuchen, externe Plugins zu erstellen.
Wichtige Punkte:
Das Buch ist kostenlos erhältlich und hat das Modell "Bezahlen, was Sie wollen". Nehmen Sie sich eine Kopie und hoffen Sie, dass dies hilft.
quelle
Beispielanwendung mit einem funktionierenden Plugin-System (danke an Gijs für die Gründung des Github-Repos!) Https://github.com/PacktPublishing/Mastering-Angular-2-Components/tree/master/angular-2-components-chapter-10 basiert im eBook Mastering Angular 2 Components
Prost, Niklas
quelle
Was Sie suchen, ist das verzögerte Laden von Modulen. Hier ist ein Beispiel dafür: http://plnkr.co/edit/FDaiDvklexT68BTaNqvE?p=preview
Am besten ... Tom
quelle
Ich habe einen Hack zum Laden und Kompilieren anderer Module in der Bootstrap-Zeit gemacht, aber ich habe das Problem der zyklischen Abhängigkeiten nicht gelöst
Fügen Sie dann in AppModule Folgendes hinzu:
quelle
Ich suchte auch nach einem Plugin-System in Winkel 2/4, um eine RAD-Umgebung für eine Unternehmensanwendung bei der Arbeit zu entwickeln. Nach einigen Recherchen habe ich mich entschlossen, eine Sammlung von datenbankgespeicherten (aber möglicherweise im Dateisystem befindlichen) Pseudo-Angular-Komponenten zu implementieren.
Die in der Datenbankdatenbank gespeicherten Komponenten basieren auf ng-dynamic und die Implementierung der Hauptkomponente ähnelt der folgenden:
Der externe Javascript-Code ähnelt Winkelkomponenten:
Und die Vorlagen der Komponenten sind wie eckige Vorlagen:
Und könnte auch verschachtelt sein:
Obwohl es nicht perfekt ist, haben die Entwickler der benutzerdefinierten Komponenten ein ähnliches Framework wie in angle2 / 4.
quelle
Dies kann "manuell" erfolgen. Da das Webpack nichts über externe (Plug-Ins) Module weiß, kann er sie nicht in Bundles aufnehmen. Also habe ich mir den Code angesehen, der von Webpack generiert wurde, und ich habe diese Codetypen in main.bundle.js gefunden:
Untersuchen wir, was dieses Array enthält:
Wenn Sie also theoretisch einen Eintrag zur Map-Eigenschaft hinzufügen, Ihr Routing konfigurieren und dem Muster folgen, können Sie ein Plug-In-System verwenden. Die Herausforderung besteht nun darin, Einträge zu dieser Karteneigenschaft hinzuzufügen oder daraus zu entfernen. Offensichtlich kann es nicht aus Winkelcode gemacht werden, es sollte für ein externes Werkzeug gemacht werden.
quelle
Ich habe versucht, eine Plugin-Architektur unter Verwendung von ABP, Angular und ASP.NET Core zu implementieren: https://github.com/chanjunweimy/abp_plugin_with_ui
Grundsätzlich habe ich Winkel-Plugins mit verschiedenen Winkelanwendungen entwickelt und diese dann dynamisch addiert.
Weitere Informationen darüber, wie ich es erreiche:
Ich habe 2 Angular-Cli-Anwendungen, 1 ist die Haupt-Angular-Cli-Anwendung und eine andere ist die Plugin-Angular-Cli-Anwendung. Das Problem, mit dem wir beim Ansatz der Angular-Cli-Plugin-Architektur konfrontiert sind, besteht darin, wie wir sie integrieren.
Im Moment habe ich ng-build für beide Anwendungen ausgeführt und sie in einem "wwwroot" -Ordner abgelegt, der dann auf einem ASP.NET Core 2.0-Server gehostet wurde. Ein einfacheres Repository, das diese Idee zeigt, ist Angular Multiple App: https://github.com/chanjunweimy/angular-multiple-app
abp_plugin_with_ui ist ein Repository, das an der Entwicklung eines Plugins arbeitet, das sowohl das Backend als auch Angular cli enthält. Für das Backend habe ich das Aspnetboilerplate-Framework verwendet, das das Frontend mit mehreren Angular-Cli-Anwendungen entwickelt.
Um die Hauptanwendung in die Plugin-Anwendung zu integrieren, müssen wir "ng-build" für beide Anwendungen ausführen (beachten Sie, dass wir auch in href der Plugin-Anwendung wechseln müssen), und dann den erstellten Inhalt des Plugins verschieben Angular Cli-Anwendung, zum Hauptanwendungsordner "wwwroot". Nachdem dies alles erreicht ist, können wir "dotnet run" ausführen, um die ASP.NET Core 2.0-Webanwendung zum Hosten der durch "ng build" generierten statischen Dateien bereitzustellen.
Hoffentlich hilft es. Kommentare sind willkommen! ^^
quelle
Ein wenig abseits des Themas, aber UI-Komponentenbibliotheken könnten für einige der Leser von Interesse sein, die nach Plugins suchen:
https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the -angular-cli-and-ng-packagr-53b2ade0701e
NativeScript verfügt über integrierte UI-Plugins:
https://docs.nativescript.org/plugins/building-plugins
Diese Plugins benötigen einen Angular Wrapper:
https://docs.nativescript.org/plugins/angular-plugin
quelle
Ich bin derzeit auf der gleichen Suche wie Sie und versuche, eine steckbare / themenfähige Version von Angular zu erstellen. Dies ist kein triviales Problem.
Ich fand tatsächlich ziemlich gute Lösungen, las das Buch Entwickeln mit Angular von dem Genie Denys Vuyika , er erklärte tatsächlich auf dem Buch eine ziemlich gute Lösung, er spricht über externe Plugins auf Seite 356 des Buches und verwendet Rollup.js , um das zu erreichen Anschließend verarbeitet er das dynamische Laden externer Plugins, die zuvor außerhalb Ihrer Anwendung erstellt wurden.
Es gibt auch zwei andere Bibliotheken / Projekte, die Ihnen dabei helfen, dieses Ergebnis zu erzielen. Ng-packagr und Nx-Erweiterungen für Agnular (von Nrwl), die wir für die Implementierung des letzteren verwenden, und ich würde sagen, es ist nicht so reibungslos wie erwartet, Angular war einfach nicht dafür gebaut, also müssen wir einen Teil des Kerns daran herumarbeiten, wie Angular und die NX-Leute eines der besten sind.
Wir stehen erst am Anfang unseres Open Source-Projekts und verwenden Django + Mongo + Angular. (Wir rufen WebDjangular auf und einer unserer möglichen Ansätze für diese Antwort ist, dass Django einige JSON-Konfigurationsdateien schreiben und die erstellen muss Anwendung jedes Mal, wenn ein neues Plugin oder Theme installiert und aktiviert wird.
Was wir bereits erreicht haben, ist, dass wir aus der Datenbank Tags für die Komponenten wie im Plugin verwenden können und die Komponente auf dem Bildschirm gedruckt wird! Das Projekt befindet sich wieder in einem sehr frühen Stadium. Wir stützen unsere Architektur ein wenig auf Wordpress und müssen noch viele weitere Tests durchführen, um unseren Traum zu verwirklichen: D.
Ich hoffe, das Buch kann Ihnen helfen, und mit Rollup.js weiß ich, dass Sie dieses nicht triviale Problem lösen können.
quelle
Ich habe einen guten Artikel von Paul Ionescu darüber gefunden, wie man eine erweiterbare Plugin-Anwendung in Angular erstellt.
https://itnext.io/how-to-build-a-plugin-extensible-application-architecture-in-angular5-736890278f3f
Er verweist auch auf eine Beispielanwendung bei github: https://github.com/ionepaul/angular-plugin-architecture
quelle