Loading a dynamic module from another url-angleular4

Question

Is it possible to refer to a module (already compiled in umd or es format) and dynamically load it into an already compiled angular application?

• The main shell application, located at: http://plugin_shell.mydomain.com
• Module (with a bunch of components, services, etc.): the compiled code is hosted on a different URL. let's say: http: //plugins/modules/myfirstplugin.umd.js
• When loading the shell. Download all modules, display specific components, refer to services, class of use, etc.

I tried loading the module using SystemJsNgModuleLoader.load, but it seems to work with such use cases.

thank

EDIT: same question (no answer): How to dynamically load an angular 2 external module (e.g. from an external module module.bundle.js)

Answer 1

You can do it as follows:

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

Read Here's what you need to know about dynamic components in Angular for more details. In particular Dynamic module loading and compilation.