Chargement d'un module dynamique depuis une autre url- angular4

Question

Est-il possible de référencer un module (déjà compilé au format umd ou es) et de le charger dynamiquement dans une application angulaire déjà compilée ?

1. Application shell principale hébergée à : http://plugin_shell.mydomain.com
2. Un module (avec un tas de composants, de services, etc.) : code compilé est hébergé sur une autre url. Disons.. : http://plugins/modules/myfirstplugin.umd.js
3. Lorsque le shell est chargé. Chargez tous les modules, rendez les composants spécifiques, référez-vous aux services, utiliser une classe, etc.

J'ai essayé de charger le module avec SystemJsNgModuleLoader.load, mais cela ne semble pas fonctionner avec ce genre de cas d'utilisation.

Gracias

EDIT : Même question (pas de réponse) : Comment charger dynamiquement un module angulaire 2 externe (comme servi depuis un module externe.bundle.js)

Answer 1

Vous pouvez le faire comme ça :

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

Lire Voici ce que vous devez savoir sur les composants dynamiques en Angular pour plus de détails. Plus précisément Dynamic module loading and compilation section.