Skip to content

Named page-router-outlets render blank after a back navigation happened below them #180

Closed

Description

@timdoege

Environment

  • CLI: 9.1.2
  • Cross-platform modules: @nativescript/core 9.1.3
  • Android Runtime: 9.1.1 (emulator, API 36)
  • iOS Runtime: 9.1.0 (simulator, iOS 27.0)
  • Plugin(s): none
  • NativeScript-Angular: 22.0.1 (the code is unchanged on main)
  • Angular: 22.0.8

Describe the bug
Runtime bug, both platforms.
A page with named page-router-outlets (one per tab, the usual TabView / BottomNavigation setup) opens with every outlet empty.
This happens when the page is opened again after a back navigation took place on top of an older copy of the same page.

To Reproduce
Routes: home, tabs (with children in named outlets aTab and bTab), detail, detail2, all in the root page-router-outlet.

  1. Home: navigate to /tabs. Both tabs show their content.
  2. From tab A: navigate to /detail.
  3. From detail: navigate to /detail2, then go back to detail.
  4. From detail: navigate forward to /tabs again.

Expected behavior
The new tabs page shows both tabs, as in step 1.

Actual behavior
The new tabs page shows both outlets empty.

Expected (step 1) Actual (step 4)

If you skip step 3, the tabs page opens fine.
So the back navigation is the trigger.

Sample project
https://github.com/timdoege/ns-angular22-tab-outlets-blank-after-back

Maestro flows are included: .maestro/repro.yaml fails on 22.0.1, and .maestro/control.yaml (the same steps without step 3) passes.

Additional context
Cause, in NSLocationStrategy:

  • _beginBackPageNavigation marks the outlet that goes back and every outlet below it as navigating back.
  • Only an outlet that is activated during that back clears its own mark again (_finishBackPageNavigation).
  • In step 3 the root outlet goes back and clears its mark. The aTab and bTab outlets are marked too. They belong to the tabs page, which is lower in the back stack, so this back does not activate them, and they keep the mark.
  • In step 4 the new tabs page gets new page-router-outlets, but findOutlet returns the existing Outlet objects for aTab and bTab, which are still marked. Their activation is then handled as a back navigation, and no page is shown.

Proposed fix: a forward page navigation means no back navigation is in progress below the navigating outlet.
So _beginPageNavigation clears the stale back marks of all outlets below currentOutlet.
With this change, both Maestro flows pass on iOS and Android.
Going back from the second tabs page to the first one also still works.
The diff is in the sample repo (upstream-fix.diff), and I will open a PR with it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions