Full disclosure, I am new to the Nativescript framework so if I'm doing something very obviously wrong please be patient.

Environment

• Android: API 28, target Android 9.0 (Google Play)
• CLI: 5.1.1
• tns-android: 5.0.0
• tns-core-modules: 5.1.1
• NativeScript-Angular: 7.1.0 (recently upgrade to 7.2.1 and issue didn't change)
• Angular: 7.1.0

Describe the bug

The page flashes white when navigating between child routes of a component that is using a "page-router-outlet" both with page transitions and without them. I have a feature module (lazy loaded) with a main component that contains an action bar and a page-router-outlet, with the idea being that we can navigate to multiple children pages without affecting the action bar. The child pages essentially act like a stepper collecting data.

To Reproduce

Things to note:

• Every top level layout component has a class on it to change background to a very dark color (which makes the white flashes EXTREMELY intrusive)
• The component that contains the nested page-router-outlet is in a lazy loaded module (see below for routes)

Navigating from app entry point -> Child A: No issues, app behaves as expected.

Navigating from Child A -> Child B -> Child C with page transitions disabled: White flash happens on every page change both forward and backward

Navigating from Child A -> Child B -> Child C with page slide transition enabled: No white flashes occur going forward, however navigating backward once creates 1 white flash after the reverse slide animation. All further backward navigation will have 2 white flashes, and at some point page slide animations will break and the only thing that will happen on navigation is flashing.

Expected behavior

Page transitions happen smoothly without white flashes, both with and without animations.

Additional context

Routing within the lazy loaded module. In order to hit 'new-user', we navigate to auth/new-user, which routes through the '' path. The issue also seems to happen when giving the blank path a value such as auth/onboarding/new-user.

Outlet component html. The idea is that we track step progression here without removing the action bar on every step

Main app routing. Right now, home component links to auth/new-user which loads the auth module and accesses the first child page

EDIT

This setup apparently doesn't like navigating backwards. Once navigated to the first child component navigating backwards breaks the app.

EDIT 2

Some more context that may help. After navigating from /home -> /auth/new-user if you press the back button it returns to a white page no matter if you use .back() or .backToPreviousPage(). I'm assuming this means its routing to the blank outlet page, but I don't know why it wouldn't bring me to /home.

Also, the state of the child pages is not being preserved. So if I set a variable in Child A, navigate to Child B, then press the back button, the component variables on Child A are reset back to the original state.