Doing a 'backToPreviousPage' or Back Button to a Page using 'router-outlet'

[jogboms]

Doing a back button navigation or Using the backToPreviousPage method to a page using <router-outlet></router-outlet> results in a blank page as though the <router-outlet></router-outlet> is no longer present on the page because further routing on that page no longer works.

nativescript │ 3.2.0-2017-07-31-9530
tns-core-modules │ 3.1.1
tns-android │ 3.1.0
tns-ios │ 3.1.0
nativescript-angular | 4.3.0-2017-8-10-8
@angular/* | 4.2.6

[NickIliev]

Hey @jogboms we were not able to reproduce an issue using this sample project. In the project both back() and backToPreviousPage() methods are working as expected (code here). Please provide sample project or snippet which can preproduce your issue so we could investigate further.

[jogboms]

I did a fork of this sample project and made some changes here.

[jogboms]

@NickIliev I missed adding that i'm using the latest nativescript-angular with NativescriptAnimationsModule. I just checked your sample project.

[NickIliev]

@jogboms thank you for your clarifications - I can confirm that after some additional tests the issue is reproducible. We will investigate this case and will post the info in this issue.

Steps to reproduce the issue:

• use this sample
• add back navigation for the ensted pages in the router-outlet

in the component class for sub-route-one.component.ts and sub-route-two.component.ts

    constructor(private router: RouterExtensions) { }

    navigateBack() {
        this.router.back();
    }

and add back button in the respective HTML files

<GridLayout rows="auto, *">
    <Label row="0" text="Loaded inside the nested router" textWrap="true" class="m-16 text-center"></Label>
    <Button row="1" text="This is SECOND. Load FIRST" [nsRouterLink]="['/routing/nested-routers/first']" class="btn btn-primary btn-active"></Button>
    <Button text="navigateBack" (tap)="navigateBack()"></Button>
</GridLayout>

• navigate to the example and tap one of the nested pages than tap the button to navigate back.
  A blank page appears.

@jogboms with the workflow used in our example backToPrevousPage works as expected (navigating back to the previous page loaded in the page-router-outlet) and the white screen is only loaded when in the nested router-outlet when there is no prevous page in the stack (which as a workaround can be controlled with a boolean flag). You might want to take a look at the provided sample and implement it as a temporary solution. Meanwhile we will post any additional info regarding this case in this issue.

[jogboms]

@NickIliev I have looked at your sample project but it still doesn't implement my said scenario which i implemented here forking this repo.

I am using back navigation to a page that contains Angular's router-outlet. The router-outlet doesn't seem to come up again on that page.

[noomieware]

@NickIliev I missed adding that i'm using the latest nativescript-angular with NativescriptAnimationsModule. I just checked your sample project.

I have the same issue, however, I'm not using the AnimationsModule. So it seems to be a more generic router-outlet issue then bound to additional module references.

[blueberrynotblue]

@jogboms found any tricks to workaround?

[jogboms]

None yet. Had to ditch the approach for now and move on since its currently WIP.

…

On Monday, 9 October 2017, huangbo ***@***.***> wrote: @jogboms <https://github.com/jogboms> found any tricks to workaround? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#941 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AF675seGun88gHGlfC4GiQ1FoesQXEmmks5sqm-_gaJpZM4O1oS9> .

-- [image: --] Jeremiah Ogbomo [image: https://]about.me/jeremiahogbomo <https://about.me/jeremiahogbomo?promo=email_sig&utm_source=email_sig&utm_medium=email_sig&utm_campaign=external_links>

[vakrilov]

Hey @jogboms - good news.
I tried your example with the @next version and [email protected] and it seems to be working now.
We had a big refactoring in the router implementation(#993) which probably healed the problem.

The fix will be included in the [email protected] but you can try it now with @next tag.

[jogboms]

Thank you @vakrilov. Tested it out. Big ups.
I'd incorporate it into the larger app and see how it plays with the other things.

[alexma01]

I have app with angular version 4.4.1 and nativescript-angular 4.4.0 but i have same problem