Back navigation in nested page router outlets fails after consecutive invocations

[timdoege]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 8.1.5
• Cross-platform modules: 8.1.1
• Android Runtime: 8.1.0
• iOS Runtime: 8.1.0
• Plugin(s): @nativescript-community/ui-material-bottom-navigation / 6.2.5
• NativeScript-Angular: 13.0.0
• Angular: 13.1.1

There seems to be something a bit off using back-navigation after upgrading from Angular 12 to Angular 13.
During the first back navigation everything looks normal, but repeating the exact same navigation a second time starts with a blank screen (animated sliding in from the left) and then the actual content comes sliding in from the right after a small delay.

I cannot reproduce this using the smallest sample (ns create ns81-ng13 --ng) but using this sample with bottom navigation and nested page router outlets:

https://github.com/timdoege/ns-login-tab-navigation-ng13

This is just the same app as this one:

NativeScript/login-tab-navigation-ng#21

• just updated from Angular 12 to Angular 13.

The Angular 12 version does not have this behaviour (just testing by entering player details and pressing Back()).
In my larger project, I do get this new error message now

CONSOLE ERROR: ns-router: Attempted to call startGoBack while going back:

when the back navigation is off.

[fpaaske]

I'm also struggling with nested page router outlets, NativeScript 8.1 and Angular 13. I see the same behaviour as described above.

[maddy2get]

I am also having same issue with nested routes in bottom navigation, it works first time but not second time once you have cleared history.

[boris01]

I'm having similar problems after upgrading to Angular 13 with NS 8.1.
I have an error:
ns-router: No outlet found relative to activated route
It is working with Angular 12

[boris01]

Hi There,
Any update on this, please...?
This bug prevents me from upgrading to Angular 13.
@NathanWalker please help.
Thanks

[edusperoni]

Hello!

This is an issue with the rubber band solution that we had to put in place due to a change in route reuse strategy in Angular 13. Unfortunately we are still due to a massive refactor at the Routing side, which should solve the routing issues with NativeScript+Angular (hopefully).

I've packed #54 into the following tgz, please try it and confirm it's working well on your projects:

nativescript-angular-13.0.2-custom.0.tar.gz

[boris01]

Hello @edusperoni !
Thanks for the effort!
I tested your package and now the only thing that still throw an error (ns-router: No outlet found relative to activated route)
is when navigating back by outlet name
backByOutlet() { this.routerExtension.back({ outlets: ["playerTab"] }); }

[timdoege]

Hi @edusperoni ,
Really great work on this - much appreciated! I tried the nativescript-angular-13.0.2-custom.0.tar.gz in

1. The login-tab-nav sample (feat: migrated to NS 8.1 / Angular 12 (and MD bottom navigation) login-tab-navigation-ng#21)
   • just with version 6.2.11 of @nativescript-community/ui-material-bottom-navigation
2. One of our production apps

Each on both Android and iOS, both running on NS 8.1 (have not tried 8.2-alphas, but let me know if that is a prerequisite/preferred due to the ongoing FragmentManager changes).

On iOS and 1) worked fine, and I cannot reproduce the "back by outlet name"-error @boris01 gets.
On Android 1) works as well, but here I do get this error on "back by outlet name":

JS: NavigationEnd(id: 23, url: '/tabs/default/(playerTab:players/player/1//teamTab:teams/teams)', urlAfterRedirects: '/tabs/default/(playerTab:players/player/1//teamTab:teams/teams)')
JS: NavigationEnd(id: 23, url: '/tabs/default/(playerTab:players/player/1//teamTab:teams/teams)', urlAfterRedirects: '/tabs/default/(playerTab:players/player/1//teamTab:teams/teams)')
JS: Scroll(anchor: 'null', position: 'null')
JS: Scroll(anchor: 'null', position: 'null')
System.err: An uncaught Exception occurred on "main" thread.
System.err: No view found for id 0xd (unknown) for fragment fragment22[2]<Page(280)>
System.err: 
System.err: StackTrace:
System.err: java.lang.IllegalArgumentException: No view found for id 0xd (unknown) for fragment fragment22[2]<Page(280)>
System.err: 	at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:315)
System.err: 	at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1199)
System.err: 	at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1368)
System.err: 	at androidx.fragment.app.FragmentManager.moveFragmentToExpectedState(FragmentManager.java:1446)
System.err: 	at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1509)
System.err: 	at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:447)
System.err: 	at androidx.fragment.app.FragmentManager.executeOps(FragmentManager.java:2181)
System.err: 	at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:2004)
System.err: 	at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:1959)
System.err: 	at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:1861)
System.err: 	at androidx.fragment.app.FragmentManager$4.run(FragmentManager.java:413)
System.err: 	at android.os.Handler.handleCallback(Handler.java:883)
System.err: 	at android.os.Handler.dispatchMessage(Handler.java:100)
System.err: 	at android.os.Looper.loop(Looper.java:214)
System.err: 	at android.app.ActivityThread.main(ActivityThread.java:7356)
System.err: 	at java.lang.reflect.Method.invoke(Native Method)
System.err: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
System.err: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)

When I replace <page-router-outlet> with <router-outlet> in the tabs component (making the app.component's the only one), the "back by outlet name" navigation works as well.

As for one of our production apps:
I've only tested iOS so far, and it works, however, it does seem like navigation is a bit slower to fire (maybe just under half a second, but noticable). That is on a Simulator at the moment, I have not tried on an actual device, yet.

[edusperoni]

@timdoege that error isn't related to angular, but with tabs/core. You can try the latest ui-material-tabs plugin that was just released and see if it fixes it, as it does contain a fragment fix in it.

[timdoege]

@edusperoni Yes, your are right - I just thought the "back by outlet name" worked in the old Angular 12 sample, but I just tried Angular 12 again and am getting the same ui-bottom-navigation error, so nothing wrong with the Angular-part here.
(It seems to be working in ui-material-bottom-navigation version ~6.1.0 but not in 6.2+).

I noticed your update with the fragment manager from yesterday on the "tabs"-plugin, so you may be right that the
bottom-navigation plugin needs a similar treatment.

Back to your Angular 13 build: I did a thorough test of our larger production app on Android, too, and it worked fine, so big thumbs up from here on that!

[edusperoni]

@timdoege please try with the latest nativescript alpha as well. It seems this issue will only be really solved when we refactor fragments on android. If you can find the exact version of bottom nav that introduced the bug I can try to fix it in the other repo.

I'm leaving this issue open and I should have time this week to do the last touches on the "backByOutlet". Then we'll merge and publish

[edusperoni]

backing by outlet now searches for the outlet recursively. PR is ready for review and will be merged and released soon