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

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

@jogboms

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.

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

@NickIliev

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

@jogboms

@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.

@NickIliev

@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.

@NickIliev

@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.

@jogboms

@jogboms found any tricks to workaround?

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>

@jogboms

Hey @jogboms - good news.
I tried your example with the @next version and angular@4.4.0 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 nativescript-angular@4.4.0 but you can try it now with @next tag.

@vakrilov

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.

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

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

NickIliev commented on Aug 14, 2017

jogboms commented on Aug 14, 2017

jogboms commented on Aug 14, 2017

NickIliev commented on Aug 14, 2017

jogboms commented on Aug 15, 2017

noomieware commented on Sep 13, 2017

blueberrynotblue commented on Oct 9, 2017

jogboms commented on Oct 9, 2017

vakrilov commented on Oct 10, 2017

jogboms commented on Oct 10, 2017

alexma01 commented on Feb 16, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions