search

NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.21k stars 241 forks source link

BottomNavigation loads all tabs even with lazy loading #2147

Open vytautas-pranskunas- opened 4 years ago

vytautas-pranskunas- commented 4 years ago

I have noticed that all tabs are preloaded in BottomNavigation. So i had a question is it relly true so asked question on stackowerflow - otherways lazy loading does not have any effect. In stackowerflow i was told that with BottomNavigation only one tab should be loaded (i know that it is not tre for Tab and can be controlled in TabView). Here is stackoverlow link: https://stackoverflow.com/questions/61197581/how-to-make-real-lazyloading-with-nativescript-angular-tabs-and-bottomnavigation?noredirect=1#comment108273343_61197581

I have created playground: https://play.nativescript.org/?template=play-ng&id=J5oNhi&v=4 You can see console logs all 3 tabs ngOnInit's

This kind of issues are essential for performance. I hope NS team will address them ASAP.

Thanks

NickIliev commented 4 years ago

@vytautas-pranskunas this looks like a bug with combining lazily loaded modules in BottomNavigaiton (which is not supporting preloading). I guess it is more related to how NativeScript is handling the Angular modules and not so much with the BottomNavigation itself.

Removing the lazy loading should resolve the issue (see here) but still marking this one as a bug.

vytautas-pranskunas- commented 4 years ago

Thanks for an answers. Are you trying to say that i have to remove all routing and modules and just add plain components into tabcontentitem? But it will solve issue only by half: 1) It will not hit ngOnInit. 2) App will have to load, but not preload, components which will make app havier and slower. 3) If we cannot trust ngOnInit how can we trust ngOnDestroy - we need to check is it hitted at all...

manojdcoder commented 4 years ago

@NickIliev I think it's not exactly lazy loading, it's the page router outlets. In the Playground sample the path for each outlet is set upon launch (/(searchTab:search//accountTab:account//thirdTab:third)), if the path is set only for primary outlet (/(searchTab:search)) that solves the issue. But then the developer will have to listen for selectedIndex change event and load the outlet with initial path if it doesn't have one already. In my opinion thats an overhead, loaded event on root view could be used instead of ngOnInit to actually know when the tab is being rendered.

vytautas-pranskunas- commented 4 years ago

If you remove other routes, tabs are not working meaning that content in tabs are not showing...

vytautas-pranskunas- commented 4 years ago

@manojdcoder can you improve playground to try your thoughts in action and lets see if it solves an issue

vytautas-pranskunas- commented 4 years ago

I have improved palyground with lazy loading: https://play.nativescript.org/?template=play-ng&id=J5oNhi&v=7 So this issue kind of not a bug i would say it just how lazy loading is implemented. i think there should be more info about this in NativeScript docs.