Skip to content

Back navigation broken in lazy-load tabview scenario with nested page router outlets and app suspend/resume #1596

@manoldonev

Description

@manoldonev

Back navigation is broken in a scenario demonstrated by the tab navigation ng template with lazy loaded modules (see https://github.com/NativeScript/template-tab-navigation-ng/pull/85):

  1. We have a root tabview declared in app.component.html (note the named p-r-o):
<TabView androidTabsPosition="bottom">

    <page-router-outlet
        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>

    <!-- ...  -->

</TabView>
  1. In each p-r-o (page-router-outlet) we will be lazy-loading a module (e.g. in homeTab outlet --> HomeModule).
  2. We want to implement master/detail navigation within HomeModule and because of Expose emptyRouterOutlet for lazy loaded auxiliary routes angular/angular#24657 we need to construct the route like this (note the NsEmptyOutletComponent usage that is essentially a tagged p-r-o):
const routes: Routes = [
    // ...

    {
        path: "home",
        component: NSEmptyOutletComponent,
        loadChildren: "./app/home/home.module#HomeModule",
        outlet: "homeTab"
    },

    // ...
];
  1. Start the app
  2. In home tab navigate from master to detail page
  3. Suspend the app
  4. Resume the app
  5. Try to navigate back from detail page to master --> exception is logged in console and nothing happens

Explanation: Essentially the current setup means we are in a scenario with nested page-router-outlet instances -- this translated in {N} core framework terms means that we are in a scenario with nested frames). In {N} core framework we generally discourage the usage of frameModule.topmost() in a scenario with tabview and nested frames but in this case our own location strategy implementation relies on the correct ordering of the nested frames in the frame stack to retrieve page router outlet. However, on app suspend/resume we are not restoring the proper ordering of the nested frames in the frame stack thus frameModule.topmost() points to a parent frame while it should point to its existing child (nested) frame.

Update: issue is reproducible in iOS too when using the RouterExtensions.back() method.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions