How to create a plugin dashboard using Angular 4?

Question

How to create a plugin dashboard using Angular 4?

Consider; JHipster to create a basic project. Angular 4 is a client environment. Webpack links client-side assets.

The idea is to create a plug-in control panel (extensible). Will have a basic system with a basic structure and pages. Other teams can create their own plugin (page) and attach it to an existing system at run time. Therefore, we need to load module modules from the remote repository URLs that will be sent from the server (or if there is any better idea, let me know).

I built a prototype to simulate the main thread. However, I encountered many obstacles. Mostly loading plug-ins at runtime using Webpack to compile our project.

Webpack will replace all module names with module identifiers ( resource ).

In other words:

The first thing to understand is that Webpack cannot dynamically load modules that are unknown at build time. This is inherited by the way Webpack creates a dependency tree and collects module identifiers at build time. And that’s great, since Webpack is a module, not a module loader. Therefore, you need to use a module loader, and the only viable option is SystemJS (the resource ).

, , , , . URL. , ", x", , - , ", ". SystemJs - , !

@Component({
  providers: [
    {
      provide: NgModuleFactoryLoader,
      useClass: SystemJsNgModuleLoader
    }
  ]
})
export class ModuleLoaderComponent {
  constructor(private _injector: Injector,
              private loader: NgModuleFactoryLoader) {
  }

  ngAfterViewInit() {
    this.loader.load('app/t.module#TModule').then((factory) => {
      const module = factory.create(this._injector);
      const r = module.componentFactoryResolver;
      const cmpFactory = r.resolveComponentFactory(AComponent);

      // create a component and attach it to the view
      const componentRef = cmpFactory.create(this._injector);
      this.container.insert(componentRef.hostView);
    })
  }
}