Implementing a plugin architecture / plugin system / pluggable framework in Angular 2, 4, 5, 6

Question

Update 5/24/2018: We are now +3 versions of Angular from my original post and still don\'t have a final workable solution. Lars Meijdam (@LarsMeijdam) has c

Answer 1

I have just published a new chapter for my book "Developing with Angular" that addresses the topic of plugins in Angular 2+ and should be of a great interest to people that are trying to build external plugins.

Key points:

• Plugins
• Building components based on string names
• Loading configuration from external sources
• Dynamically changing application routes
• External plugins
• Creating plugin libraries
• Loading plugins into the application
• Dynamic routes with plugin content

The book is free to get, and has "pay what you want" model. Feel free to grab a copy and hope that helps.

Answer 2

I made a hack for load and compile other modules in bootstrap time, but i haven't solve the problem of cyclic dependencies

 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));

then in AppModule add this:

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

Answer 3

A little off topic, but UI Component libraries could be of interest for some of the readers, who search for plugins:
https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

NativeScript has build-in UI Plugins:
https://docs.nativescript.org/plugins/building-plugins
Those plugins needs an Angular Wrapper:
https://docs.nativescript.org/plugins/angular-plugin

Answer 4

I tried to implement a plugin architecture making use of ABP, Angular and ASP.NET Core: https://github.com/chanjunweimy/abp_plugin_with_ui

Basically, I developed angular plugins using different angular application, then I dynamically add them together.

More Information on how I achieve it:

I have 2 angular-cli application, 1 is the main angular cli application, and another is the plugin angular cli application. The problem we are facing in Angular-cli plugin architecture approach is how we integrate them.

Right now, what I did was, I run ng-build on both of the applications, and put them into a "wwwroot" folder, which then hosted in a ASP.NET core 2.0 server. A simpler repository that shows this idea is Angular Multiple App: https://github.com/chanjunweimy/angular-multiple-app

abp_plugin_with_ui is a repository which works on developing a plugin which contains both the backend and Angular cli. For the backend, I made use of the aspnetboilerplate framework, which the frontend is developed using multiple angular-cli application.

To have the main application integrated with the plugin application, we have to run "ng-build" on both of the application (note that we have to change to href of the plugin application as well), then we move the built contents of plugin angular cli application, to the main application "wwwroot" folder. After achieving all this, we can then run "dotnet run" to serve the ASP.NET Core 2.0 Web Application to host the static files generated by "ng build".

Hopefully it helps. Any comments is welcome! ^^

Answer 5

I created a repository on github with a solution which might help. It uses Angular 6 libraries and 1 base applications which load up the UMD bundled libraries lazily; https://github.com/lmeijdam/angular-umd-dynamic-example

If you have any suggestions, please feel free to add!

Answer 6

i'm currently in the same quest as you are, trying to make a Pluggable/Themable Version of Angular, and it's not a trivial problem.

I Actually Found Pretty Good Solutions, reading the book Developing with Angular by the Genius Denys Vuyika, he actually on the book explain a pretty good solution, he talks about External plugins on the page 356 of the book and Uses Rollup.js to achieve the solution, he then process to dynamically load external plugins that have been previously built outside of your application.

There is also two other libraries/projects that help you achieve this result ng-packagr and Nx extensions for Agnular (from Nrwl) we are tying to implement the latter, and i'd say it's not as smooth as we anticipated, angular was simple not built for that, so we have to work around some of the the core on how Angular, and the NX ppls are one of the best on it.

We are only at the beginning of our Open Source Project, we are using Django+Mongo+Angular, (We are calling WebDjangular and one of our possible approaches to this answer, is that Django will have to write some JSON configuration files and build the application every time a new plugin or theme is installed and activated.

What we already accomplished is, from the database we can use tags for the components like on the plugin, and the component will be printed on the screen! Again the project is in very early stages, we are basing our architecture a little bit on Wordpress, and we have a lot of more tests to do to achieve our dream :D

I Hope the Book can help you, and using Rollup.js i know you will be able to crack this non trivial problem.