Modal: Open components from lazy loaded modules

[johankvint]

Bug description:

If I create a component, to be loaded by the modal-service, in a lazy-loaded route it can not be resolved with the error:

Error: No component factory found for CustomModalContentComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.es5.js?de3d:3202)

And this is since it is created in another context for the lazy loaded module.

So I pass along the Injector from the component where I call the modal service, but that did not work as the ComponentResolveFactory for the current context is not used.

A fix would be to get the ComponentFactoryResolver from the passed injector.

modal-stack.ts

84: const contentCmptFactory = contentInjector.get(ComponentFactoryResolver).resolveComponentFactory(content);

I have tried to edit the downloaded npm package and tried to create a pull-request, but could not get the tests to pass as it could not fond an instance of ComponentFactoryModule.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.3.6

ng-bootstrap: 1.0.0-beta.5

Bootstrap: 4.0.0-beta

[pkozlowski-opensource]

This sounds very odd. Could you please provide a minimal plunker illustrating the issue?
Modals from lazy-loaded modules should work just fine. Are you sure that you are adding import for NgbModule to your lazy module (plus adding entryComponents in this module)?

I'm sorry, but we will need a minimal reproduce scenario to move forward on this one.

[johankvint]

@pkozlowski-opensource:

I actually wrap it in a shared module to get global default components.
The shared module is used by the lazy loaded module.
Adding NgbModule to the SharedModule as well works.

[johankvint]

Sorry I was a bit quick to close this. I will try to provide a plunker of my problem

[johankvint]

Here is a plunker: https://plnkr.co/edit/oRMVOWVILK211xuITxiH?p=preview

Click on the 'Mod 1 Page 1' link and then the different buttons to open shared or lazy loaded content

[pkozlowski-opensource]

I see. The problem is that you are creating / instantiating your shared modal service in root module only (and this is where you are injecting NgbModalService). As the result of your setup you are going to get the NgbModalService of the root module.

Our intention with the NgbModalService was that it is used in every module (as a provider). This way we can get injected with a proper component factory.

There are 2 ways moving forward:

• you can modify your code to have ModalService per module
• we can add an option to passing in already resolved component factory (instead of just a component class as today).

[johankvint]

Thank you!

Yes instead of adding ModalService to the root I add it to every Lazy-Module instead!

[redplane]

Could anyone show some demo please ?
I'm facing the same issue when trying to use modal in lazy loaded modal

[AndreaVitale]

Hi guys I'm having the same issue. I also created a complete stackblitz that shows the issue I have. Could you please point me to the right direction? I don't want to move my modal content into the main app.module!