MDB angular - use mdb components in lazy loaded modules

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: MDB angular - use mdb components in lazy loaded modules

georgegtx pro asked 7 years ago

Hello, I followed the getting started guide for ng-mdb-pro through npm - git. (v 4.4.3) When i try to use mdb components in lazy loaded modules they don't work. As a result i have to load  again MDBBootstrapModules.forRoot(), in every child module that will be lazy loaded. If i need to use some mdb component in the app module and a child lazy module also needs to use mdb components i have to reload MDB in both of them. As a result some singleton injectables are loaded twice. The angular compiler complaints that i am reloading an already declared provider e.t.c Why is that happening? Shouldn't the MDBBootstrapModules.forRoot(), be called just once in app.module.ts and be done with it?

georgegtx pro commented 7 years ago

This issue references as the problem the fact that modules don't inherit components from parent modules, even if the parent is the app.module, nut only services. According to answers in that issue we have to re import all necessary components in child modules. see https://github.com/angular/angular/issues/15024 If i re-import MDBBootstrapModules.forRoot() in the child module i get: Error: ToastModule is already loaded. It should only be imported in your application's main module. How will we go about that?

nthieu13 pro answered 7 years ago

I  got the same issue. First, no AOT build, and now no lazy loading module. I am starting to regret purchasing this product. So sad that supporters have no response for a long time.

Dawid Adach pro answered 7 years ago

Dear georgegtx, within before MDB 4.3.7   we used to include Alert/Toastr module inside MDBootstrapModule however within Angular update it became an issue. We have fixed that in release 4.3.7 since when, ToastModule should be loaded separately from MDBootstrapModule. This have been described in detail in our changelog: https://mdbootstrap.com/angular/changelog/   as well as Toast documentation: https://mdbootstrap.com/angular/advanced/alerts/   You should import it once, and import ToastService in components which are supposed to initiate alerts.  If you are using version lower than 4.3.7 please check following workaround. https://mdbootstrap.com/support/bug-with-the-lazy-loading/    

Roimer Peraza answered 6 years ago

Good evening, I need help, I feel like I'm going crazy. I have read most of the questions that you have asked regarding the lazy module and the implementation of this library. In my app.module.ts I import mdb and all good, the components that are loaded by this module, work correctly, I can have mdb code in my components. But when using it in other components that are loaded by other modules, it is when the error occurs. I tried to do a mdbSharedModule, but it still gives me error ... PLEASE HELP!

hellomdb pro commented 6 years ago

Hello Roimer, 1/ only import ToastModule.forRoot() at app.module 2/ Lazy module: imports: [ MDBBootstrapModulesPro.forRoot() ] or shared module imports: [ MDBBootstrapModulesPro.forRoot() ], exports: [ MDBBootstrapModulesPro ], Hope this helps

Arkadiusz Idzikowski staff commented 6 years ago

Dear Roimer Peraza, Please try the solution posted by hellomdb and let me know if that helped to resolve your problems. Regards, Arek
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
georgegtx
Pro User
2Support score
2Questions 0Answers
0Snippets likes 0Snippets