Topic: Tab issue with lazy loading
Abumaizer pro asked 6 years ago
Damian Gemza staff answered 6 years ago
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 sirDamian 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 pleaseDamian 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, DamianAbumaizer 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 gainDamian 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, DamianDamian 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, DamianFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
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 workingAbumaizer pro commented 6 years ago
i have not received any token when i bought the packageAbumaizer 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 workAbumaizer 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