Back navigation in nested page router outlets fails after consecutive invocations

[nativescript]

Back navigation in nested page router outlets fails after consecutive invocations

[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 (NativeScript/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

[boris01]

@edusperoni I'm using your nativescript-angular-13.0.2-custom.0.tar.gz custom plugin,
and it works well.
Do you know when this changes will be merged to the "official" @nativescript/angular?
Last I checked the 13.0.3 does not include it (at least it is not working with my app as your custom plugin).
Thanks for the great job!

[edusperoni]

It's released in the latest alpha at the moment, I'll check if we can release it as latest this week

[boris01]

@edusperoni Thanks a lot!