Topic: Tab issue with lazy loading

Abumaizer pro asked 6 years ago


I am including all mdb modules in a shared module. the shared module is imported and exported by the lazily loaded module. The tab looks fine but on start, you can notice that there is no content visible if you click anywhere around it the content becomes visible. also, I need to double-click each tab to switch between them, any help, please?

Abumaizer pro commented 6 years ago

it is really becoming frustrating, I tried bootstrap tab and they just work fine in my app, https://ng-bootstrap.github.io/#/home, only this tab and pills from mdb are not working

Abumaizer pro commented 6 years ago

i have not received any token when i bought the package

Abumaizer pro commented 6 years ago

beside that, I beleive my issue is not lazy loading now, I even tried the tabs in component, imported by app module, and still the same problem, I have to click twice on the tab to get it to work

Abumaizer pro commented 6 years ago

Thank you so much for your follow up. I confirm everything is working now, I had changeDetection set to ChangeDetectionStrategy.OnPush, in my app component, removing it recified the issue. again, your efforts are appreciated

Damian Gemza staff answered 6 years ago


Hello Abumaizer, Could you tell me, if you have imported every mdb components in every component which uses lazy loading? Shared modules would not work there in this situation. Best Regards, Damian

Abumaizer pro commented 6 years ago

even if I import Shared modules, which has all mdb components, in every lazy module?

Damian Gemza staff commented 6 years ago

Yes, even. Lazy loading concept required to import all components which your component will use. So for example, if your AppComponent uses datePicker, timePicker and other stuff, you have to import datePicker, timePicker in your AppComponent.

Abumaizer pro commented 6 years ago

thank you so much sir

Damian Gemza staff commented 6 years ago

Everything works fine now ?

Abumaizer pro commented 6 years ago

Damian, sorry to reopen this issue again, it has been inconsistent with lazy modules I have a lazy route that load other lazy route children, so I imported in both of them all mdb modules as follows, `declarations: [ DbHeaderComponent, DbFooterComponent, DbHomeComponent, RegistryOutletComponent, LeftSideNavComponent, ], imports: [ DbRoutingModule, CommonModule, MDBBootstrapModulePro, MDBBootstrapModule, ReactiveFormsModule, FormsModule, StoreModule.forFeature('DbSearch', dbSearchReducer), EffectsModule.forFeature([UserSearchEffects]), ], exports: [ DbHeaderComponent, DbFooterComponent, MDBBootstrapModulePro, MDBBootstrapModule, ], ` <pre></pre> yet still same issue with the tab Do I need to import for root?? any help please

Damian Gemza staff commented 6 years ago

Dear Abumaizer, please check those links. They are providing necessary informations about lazy loading and lazy routing. https://medium.com/@leekp/lazy-loading-with-angular-4-29c23792b7f4 https://angularfirebase.com/lessons/how-to-lazy-load-components-in-angular-4-in-three-steps/ https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html Let me know if advices from this tutorials works for you. Best Regards, Damian

Abumaizer pro commented 6 years ago

Thank you sir for the links, I went through them step by step. my issue is a little bit weird,, I can see that a lot of mdb functionalities are working properly like for modal, tags , etc.., I did this testing just to try to isolate the source of the problem. what I concluded is that Navs in general don't work properly in my lazy modules, most probably there is a directive that is not exported in those lazy modules. could you please advise? Thanks a gain

Damian Gemza staff commented 6 years ago

Dear Abumaizer, is there a possibility to share me your whole project without node_modules directory? it would help me debug your case. Best Regards, Damian

Damian Gemza staff commented 6 years ago

Dear Abumaizer, I tried to reproduce your error - created a project which includes lazy loading for few few components, added there MDB Pro and used 2 kinds of tabs (basic example and classic tabs). Everything is located on my github: https://github.com/Bloodcast69/lazy-load . Just clone this repo, in package.json add your token and type npm install. For me, everyting is working fine. I've used this tutorial for making an lazy-load: https://angular.io/guide/lazy-loading-ngmodules Best Regards, Damian


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags