[FEATURE] Bottom Navigation with Lazy Loading

[alexandruantonica]

Do you know any way to implement the Bottom Navigation plugin with Lazy Loading?
I will explain a bit about my scenario.
I choose to call the components (TabOne, etc) in this way because it will keep the state after you change the tab. With routing, the tab is destroyed when I go to another tab and initiated again when I go back. I needed a way to keep the state of the tab and this was the only one. (If you have another idea, feel free to explain it).

home.module

@NgModule({
     imports: [
        ...
        TabOneModule,
        TabTwoModule,
        TabThreeModule,
    ],
})

home.component.ts

public bottomBar: BottomBarObject = {
        structure: [],
        tabs: [],
        selectedIndex: 0
    };

constructor(...) {
       this.bottomBar.structure = [...];
       this.bottomBar.tabs = this.bottomBar.structure.map(tab => {
            return new BottomNavigationTab(tab.title, tab.icon, tab.selectable);
        });
}

tabSelected(args: OnTabSelectedEventData): void {
        if (args.newIndex !== args.oldIndex) {
            console.log(`bottomBar tabSelected : ${args.newIndex}`);
            this.bottomBar.selectedIndex = args.newIndex;

            ...<some more logics>
        }
    }

home.component.html

<BottomNavigation [tabs]="bottomBar.tabs" (tabSelected)="tabSelected($event)"></BottomNavigation>
<StackLayout [ngSwitch]="bottomBar.selectedIndex">
        <app-tabone *ngSwitchCase="0"></app-tabone>
        <app-tabtwo *ngSwitchCase="1"></app-tabtwo>
        <app-tabthree *ngSwitchCase="2"></app-tabthree>
</StackLayout>

It works perfectly in this way.

My problem
The problem appears when I wanted to do some performance improvements in startup time and I realized that for home.module I have to load all the other modules included in BottomBar (TabOneModule, TabTwoModule, etc) even if the user, probably, do not use one of them (let's say TabThreeModule).
I would like to know if there is any way to implement Lazy Loading for this scenario where I can lazy load one of my module inside of Bottom Bar manually when tabSelected is triggered.

Any idea?

[henrychavez]

Hi @alexandruantonica ,

I understand your problem. I know a possible solution but I didn't have the time to test.

You can try combining ngSwitch but instead to loading the component you can load a page-router-outlet now that we can use multiple page-router-outlet I think is the best solution to avoid this kind of problems, but once again I didn't have the time to test that implementation.

You can use this article as a guide this 2 articles:

• https://www.nativescript.org/blog/implementing-a-login-for-nativescript-apps-with-tab-based-navigation
• https://www.nativescript.org/blog/implementing-a-login-for-nativescript-apps-with-tab-based-navigation

Let me know how it goes 😃

[henrychavez]

@alexandruantonica are you still having problems?

[alexandruantonica]

@henrychavez I didn't test your idea but it seems to make sense and I gonna try it this week if I can find some free time.
I will also create a fresh project to test this idea and post it here, maybe will help others.

[armpogart]

@henrychavez ngSwitch with ngCase doesn't work as far as I tested, as if you wrap page-router-outlet in ngCase and do navigation of named outlets in ngOnInit as in nativescript blog examples, the navigation isn't done simply, because named page-router-outlets aren't rendered until ngCase and init can't do it properly. I still want to test another idea and will let you know. I will also prepare minimal reproducible repo. See also https://stackoverflow.com/questions/54886900/tab-navigation-using-bottomnavigation-not-tabview-crashing

[armpogart]

@henrychavez

I have prepared repo for minimal reproduction of the problem.
By running master branch, you can see the problem with application resuming. As soon as you lock your phone or simply minimize and resume the application error occurs.
On the branch ngswitch you can see the implementation with switch and cases and by running it, you can see that it doesn't work.
I even tried to do the navigation for the outlets not only in component init, but also on every switch (the code is commented out), but it doesn't work also. The first tab is rendered only, and after switching from it and then switching back, even it doesn't work. I think that it is logical, that that switch case won't work, as the page-router-outlets are not rendered on init (only first one is), so the navigation doesn't take place there, but I'm not sure why the navigation doesn't work even while switching.

I have also tried the same implementation without your plugin, I simply put the button instead of your tabs, and on button tapping, switched the outlet, and no error occurs on resume. So it's something related to the plugin and not nativescript directly.

As a remark, recently new error started to occur while using this plugin, the error occurs on build, but everything works as expected. I guess it's something with your plugin naming. As far as I know nativescript now includes some bottom navigation, and maybe names are conflicting. You can see the build error message below:

ERROR in ../node_modules/nativescript-angular/element-registry.js
Module not found: Error: Can't resolve 'tns-core-modules/ui/bottom-navigation' in 'BugRepo\node_modules\nativescript-angular'
 @ ../node_modules/nativescript-angular/element-registry.js 142:57-105
 @ ../node_modules/nativescript-angular/renderer.js
 @ ../node_modules/nativescript-angular/nativescript.module.js
 @ ./app/app.module.ts
 @ ./main.ts

I hope that we would be able to resolve the issue ASAP together, as I have working application that awaits publishing. And the only problem is this one. I have tried a lot of combinations without any success.

[henrychavez]

Hi @armpogart,
I just run the master branch and there is no issue, can you please describe a little bit more what you are trying to do?

when you set the visibility of the page-router-outlets based on the current tab is working as expected, now you are loading both page-router-outlets inside ngOnInit

ngOnInit(): void {
  this.router.navigate(
    [ { outlets: { firstTab: ['first'], secondTab: ['second'] } ],
    { relativeTo: this.route },
  );
}

and then calling the same code that won't have any effect because you already loaded those routes before and when the user press the second tab will show the second outlet and that's ok

private navigateOutlets(): void {
  this.router.navigate(
    [ { outlets: { firstTab: ['first'], secondTab: ['second'] } } ],
    { relativeTo: this.route },
  );
}

now if you want to first load the first outlet, and then load the second outlet and so on, while the user presses the tabs, you should only navigate to the first outlet inside the ngOnInit and then navigate to the rest of the outlets depending of the user selection, also if you wanna navigate to a specific route inside a page-router-outlet that's other behavior that doesn't belong to the bottom navigation, that is internal navigation of the current page-router-outlet that is being displayed.

Also if you are trying to navigate to the second outlet from the first one, you need to inform the bottom navigation of that so it can change the currently selected tab and the page-router-outlet that correspond will be visible.

Let me know if you need any help, I'll try to answer quickly this time 😄

[henrychavez]

@alexandruantonica if you are still looking for lazy-loading implementation, you should check the repo that @armpogart prepared

[armpogart]

@henrychavez
To reproduce the issue (I have tested only on android): run master branch (tns run) or build the debug build and install it (it doesn't matter I can reproduce both ways).
After running the application (make sure you see the tab contents already loaded) minimize it, or better even lock your phone (the important part is to make sure android system actually suspends the application, if the word suspend is right here) and then unlock or re-maximize the app and you must see a crash.

I can reproduce the issue on several mobile phones with different characteristics. Just make sure that the app is suspended (maybe even wait a couple of seconds after locking and before unlocking your device) as sometimes if I do it fast the crash doesn't appear. Actually the crash appears when the views are recreated (in android terms, if you are familiar, when the activity is recreated from saved bundle state).

I'll try to record the issue on emulator even, I just don't have enough time now to setup android emulator and run it, but you must be able to reproduce issue with the steps mentioned easily on any device.

[henrychavez]

@armpogart ok got it, I tested in both platform Android/iOS but I'll wait a couple of seconds to see the crash, also can you provide me the version of the nativescript-cli that you are using?

I used nativescript@5.4.2

[armpogart]

@henrychavez I have tested again on both physical device and emulator (both only on android). And I have a crash on both. Below you can find Nativescript CLI information and attached 2 video recordings:

λ tns info
√ Getting NativeScript components versions information...
‼ Update available for component nativescript. Your current version is 5.4.2 and the latest available version is 6.0.3.
‼ Update available for component tns-core-modules. Your current version is 5.4.3 and the latest available version is 6.0.7.
‼ Update available for component tns-android. Your current version is 5.4.0 and the latest available version is 6.0.2.
‼ Update available for component tns-ios. Your current version is 5.4.2 and the latest available version is 6.0.2.

• device
• emulator

I have added another branch that doesn't have lazy loading, and everything works ok. But the whole idea of using this navigation pattern (and your plugin) first to have lazy-loading (which is not lazy at all in current demo as both outlets are loaded immediately, I still haven't tried your described approach) and second to place everything in corresponding modules (this one is critical for big applications).

From my reproduction it's obvious that your plugin have some problems with lazy-loaded views. As far as I understand on resuming application it tries to recreate the view which is already there.
Can you please help me with this problem, this is the only thing left for fixing before publishing my clients application. Thanks in advance.