question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal: Open components from lazy loaded modules

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
AndreaVitalecommented, Aug 15, 2019

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!

0reactions
redplanecommented, Jul 29, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to open a component from lazy loaded module in ...
Show activity on this post. It allows, inside the modal, to navigate to a route, and in particular, to a route that would...
Read more >
Lazy loading non-routing modules with bootstrap modals ...
Hello, I want to tell you how you can slim down your main build. If you have a lot of modals with few...
Read more >
Lazy Load Modal Components in Angular | by Netanel Basal
In most cases, we'll open the modal only when a user triggers a specific action.
Read more >
Manually Lazy Load Modules And Components In Angular
In this blog post, I want to demonstrate how modules and components can be lazy-loaded at runtime using Angular 9+.
Read more >
Open ng-bootstrap modal from component with lazy loaded ...
lazy.service'; @Component({ selector: 'ngbd-modal-content', template: ` <div ... modalService: NgbModal) {} open() { const modalRef = this.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found