How angular router lazy loading dependent modules entryComponents works without issue but not the custom lazy loaded module

Question

For some valid reason I am trying to remove routing(in this case its lazy one) from my angular 6 app. I am using NgModuleFactoryLoader to load dynamic components and modules. Refer below article

https://netbasal.com/the-need-for-speed-lazy-load-non-routable-modules-in-angular-30c8f1c33093

So I have a lazy module ModuleA which depends on mat-dialog which loads a component named FilterComponent part of entryComponent provided by another module FilterModule (already added to imports array of moduleA and not anywhere else).

//Ignore the syntax
CompA {
  openDialog() {
    matDialog.open(FilterComponent)
  }
}

ModuleA {
  imports: [MatDialog, FilterModule],
  declaration: [CompA]
}

FilterModule {
  declaration: [FilterComponent],
  entryComponent: [FilterComponent]
}

FilterComponent { ...
}

With lazy routing in place mat-dialog is able to open the FilterComponent without any issue. But when I tried to open the dialog by loading the module successfully using custom methods I got below error

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

There is one open bug in github as well but I am curious how lazy routing is working without any issue.

https://github.com/angular/components/issues/16431

Kusum Kushwaha Kusum Kushwaha · Accepted Answer · 2019-07-08T13:25:45

If a component is part of a module and you want to use that component in other module,

then put the component in exports rather than in entry component.

FilterModule {
  declaration: [FilterComponent],
  exports: [FilterComponent]
}

Now this component becomes available to other component as well, whenever you import this module in any other module.

How angular router lazy loading dependent modules entryComponents works without issue but not the custom lazy loaded module

1 Answers