CODEWITHSUNDEEP
angularlazy-loading
jurito
jurito

Reputation: 351

Angular 4 ngComponentOutlet and lazy loading modules

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

Upvotes: 4

Views: 947

Answers (1)

Max Koretskyi
Max Koretskyi

Reputation: 105547

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.

Upvotes: 4

Related Questions