Topic: MDBModalService Instance

sandy-huang free asked 4 years ago

Would you please advise how dynamic modal render through is expected to work with lazily loaded modules?

Scenario #1:

  • Import MDBBootstrapModule.forRoot() on App.Modules
  • Import MDBBootstrapModule on layzily loaded modules
  • Declare Modal component in lazily loaded modules with entryComponents

Result: Exception when invoking

ERROR Error: No component factory found for DeleteModalComponent.

Scenario #2: - Import MDBBootstrapModule.forRoot() on sharedModules - Import sharedModules on layzily loaded modules - Declare Modal component in lazily loaded modules with entryComponents

Result: Modal is rendered properly with However, backDrop removal is not working when switching between different lazily loaded modules.

By looking into the source code, I saw it is tracking the modalService instance through constant modalService.config.ts.


  1. Is "modalService" supposed to be singleton? If it is, what is the designed pattern to inject the ref of modal component in lazily loaded modules?
  2. If we should have individual instance of "modalService" in lazily loaded modules, how should we track the instance? It seems constant only have one instance tracked, and always points to the last modalService instance (which is the root casue of backDrop hiding is not working properly). Could we use DI in constructor of modalContainer.component.ts to pass in the modalService instance?

PS: I saw the initialism of modalService in modalContainer.component.ts constructor is commented out on latest v9.3.1 code (enter link description here), how the reference is built in such case?

Please advise, thanks!

Arkadiusz Idzikowski staff commented 4 years ago

We fixed the problem with the backdrop in lazy loaded modules in v8.1.0, it required some changes in modal code on our end:

Unfortunately, there is no easy workaround for this problem in previous versions. Could you confirm if the problem still occurs in v8.1.0 or later?

sandy-huang free commented 4 years ago

Thanks for the update!

I am still on Angular v7.2, so I adopted the fix to MDB (Free) v7.5.4. It worked as expected.

Please correct me if I took it wrong. Due to the constraints on injecting component ref of modal body, the modalService could not be singleton, instead, it should be injected by each lazily loaded modules (which means, we need to import MDBBootstrapModule.forRoot() on sharedModules). The instance ref of modalService is passed to modalContainer by Component Loader through Object.assign.

I have tested with another approach by passing instance ref of modalService with native Angular DI in modalComponent constructor. It worked too.


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: desktop
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: Yes