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

It can be done, "manually". Since webpack do not know anything about external(plug-ins) module, he cannot include them in bundle(s). So what I did, is to look at the code generated by webpack and I found this pies of code in main.bundle.js:

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

Lets examine what that array contains:

1. "./dashboard/dashboard.module" - this is routing URL of the module witch we want to lazy load for example :{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }
2. "../../../../../src/app/dashboard/dashboard.module.ts" - this is entry point(contructor) takes from
3. "dashboard.module" - actual file name without chunk.js(for example: dashboard.module.chunk.js)

So in theory, if you add entry to the map property configure your routing and follow the pattern, you can have a plug-in system. Now the challenge is how to add or remove entries from that map property. Obviously it cannot be done from angular code, it should be done for external tool.