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

Answer 1

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.