Angular 4 ngComponentOutlet and lazy loading modules

Question

I am currently starting to get the hang of angular 4 , specifically the dynamic components part.

I managed to replicate with success the ngComponentOutlet approach described here , plunkr here

Now what i would like to do is lazy loading a module containing the dynamic component. I see on Github that this feature should have been implemented but i'm not experienced enough in angular 4 to interpret the source changes myself, and i can't find anywhere an example of this approach.

Also, i'd like to achieve this kind of lazy loading without depending on the a4 router and with webpack (if it matters).

Anybody willing to help?

TIA

Answer 1

You can use the method compileModuleAndAllComponentsAsync of the compiler. Something along these lines:

ngAfterViewInit() {
  System.import('app/t.module').then((module) => {
      _compiler.compileModuleAndAllComponentsAsync(module.TModule)
        .then((compiled) => {
          const m = compiled.ngModuleFactory.create(this._injector);
          const factory = compiled.componentFactories[0];
          const cmp = factory.create(this._injector, [], null, m);
        })
    })
}

For more information read Here is what you need to know about dynamic components in Angular .