CODEWITHSUNDEEP
angularlazy-loadingionic4
Libin Varghese
Libin Varghese

Reputation: 1744

Unable to Dynamically Load or Lazy Load a component in Modal

I am trying to load a component via the Ionic ModalController lazily by just providing the name of the class as 'LocationComponent' instead of the class.

I get the following error when I launch the modal

No component factory found for LocationComponent.
Did you add it to @NgModule.entryComponents?

However, if I use the class instead, I am able to load it.

Demo: https://stackblitz.com/edit/github-lazyload?file=src%2Fapp%2Fhome%2Fhome.page.ts

In home.page.ts

openModal() {
  this._modalCtrl.create({
    component: 'LocationComponent'   // Error: No component factory found for LocationComponent.
                                      // Did you add it to @NgModule.entryComponents?
    // component: LocationComponent
  }).then(modal => modal.present());
}

I have defined the entryComponents: [LocationComponent] in components.module.ts

How can I get it to load lazily?

Upvotes: 1

Views: 221

Answers (1)

yurzui
yurzui

Reputation: 214067

Angular keeps component factories in a Map dictionary where key is component type not string

this._factories.set(factory.componentType, factory);

So using:

component: LocationComponent

should work for you.

Stackblitz Example

Upvotes: 1

Related Questions