Outlet becomes unresponsive/freezes when using nested outlets, Android only

[paul-staskiewicz]

Environment

• CLI: 8.5.3
• Android Runtime: 8.5.0
• Android: 12/13
• iOS Runtime: 8.5.1
• NativeScript-Angular: 14.2.8
• Angular: 14.2.12

Describe the bug
When I navigate forward in a parent outlet and then switch to another parent, the outlet I navigated forward to, does not load properly again. No image/text is loaded and the prior screen can be seen. This issue is only present on Android.

To Reproduce
The outlets configured as follows:

<BottomNavigation>
  <TabStrip>
    <TabStripItem></TabStripItem>
    <TabStripItem></TabStripItem>
    <TabStripItem></TabStripItem>
  </TabStrip>

  <TabContentItem>
    <page-router-outlet name="tab1"></page-router-outlet>
  </TabContentItem>
  <TabContentItem>
    <page-router-outlet name="tab2"></page-router-outlet>
  </TabContentItem>
  <TabContentItem>
    <page-router-outlet name="tab3"></page-router-outlet>
   </TabContentItem>
</BottomNavigation>

The routes in second outlet (tab2) are configured as follows:

NativeScriptRouterModule.forChild([
            { path: '', pathMatch: 'full', redirectTo: 'step 1' },
            {
                path: 'step 1',
                component: Step1Component
            },
            {
                path: 'step 2',
                component: Step2Component
            },
            {
                path: 'step 3',
                component: Step3Component
            },
            {
                path: 'step 4',
                component: Step4Component
            },
            {
                path: 'step 5',
                component: Step5Component
            }
        ])

The issue can be produced when navigating like this:

tab2/step 1 -> step 2 -> step 3 -> step 4 -> step 5 -> tab 1 -> tab 2/step 1 -> step 2 (becomes unresponsive/does not load properly)

Expected behavior
The component should load properly on the second navigation.

Additional context
I strongly believe it is related or could be the same as: NativeScript/nativescript-angular#2075. I will try to set up a repo to reproduce the issue.

[edusperoni]

You should probably be using page-router-outlet instead of router-outlet

[paul-staskiewicz]

You should probably be using page-router-outlet instead of router-outlet

Thanks for the reply! We're already using page-router-outlets (It was a mistake on my side when creating the issue). I've updated the issue accordingly.

[edusperoni]

Please share a demo project! That'd be very helpful. You can also share your package.json as the issue might be with the material-tabs plugin version

[paul-staskiewicz]

Please share a demo project! That'd be very helpful. You can also share your package.json as the issue might be with the material-tabs plugin version

I have uploaded a demo project: https://github.com/paul-staskiewicz/ns-frozen-outlet. Thanks in advance for helpings us out! I have included two tabs: A list tab, and a process tab. You start at the process tab and click through the steps. At the end you switch to the list tab and the navigaton will be reset on the process tab. After this, when you switch back to the process tab and start again, you will be stuck on step 1.

[paul-staskiewicz]

Please share a demo project! That'd be very helpful. You can also share your package.json as the issue might be with the material-tabs plugin version

I have experimented with the version of @nativescript-community/ui-material-bottom-navigation, as you suggested. This bug was introduced with version 7.0.1 and version 7.0.0 works fine. I will close this issue here, as it does not belong to this package.

[paul-staskiewicz]

The follow up issue is here: nativescript-community/ui-material-components#442. @edusperoni It is related to a pull request you made.