router outlet pop promise executed after then

[amanitequeen]

Bug Report

Ionic version: [x] 4.x

Current behavior: When I call pop() promise on a ion router outlet, and I attach a callback to it, the callback is executed before end of pop.

Expected behavior: The callback should be executed after pop

Steps to reproduce: Ionic 4 project,

Related code: app.component.ts

@ViewChild('masterNav', { read: IonRouterOutlet })masterNav: IonRouterOutlet;
@ViewChild('detailNav', { read: IonRouterOutlet })detailNav: IonRouterOutlet;
...
myFunction(): void{
    this.masterNav.pop().then(() => {
       //this hasn't finish to pop, so it goes to the below route... and then pops it
        this.navCtrl.navigateRoot(["", { outlets: { detailNav: "path/to/thing"}}]);
    });
}

app.component.html

<ion-split-pane when="md">
    <ion-router-outlet swipeBackEnabled="false" contentId="detailNav" id="masterNav" #masterNav></ion-router-outlet>

    <ion-router-outlet main name="detailNav" id="detailNav" #detailNav></ion-router-outlet>
</ion-split-pane>

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (C:\Users\myuser\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (C:\Users\myuser\AppData\Local\Android\sdk)
   NodeJS            : v10.15.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.7.0
   OS                : Windows 10

[liamdebeasi]

Hi there,

Thanks for opening an issue with us! Would you be able to provide a repository with the code required to reproduce this issue?

Thanks!

[amanitequeen]

I would like to but i'm struggling with this issue : https://github.com/ionic-team/ionic/issues/16354

[liamdebeasi]

It might be easier if you just push some code to a GitHub repo and then send me a link. I can clone it from there 🙂

[amanitequeen]

I can't push my code to gitHub, but it would look approximatively like that : https://stackblitz.com/edit/ionic-v4-promise-error?file=src%2Fapp%2Fapp.component.ts

[amanitequeen]

I actually am trying to convert a Ionic 3 code made with this tutorial to a Ionic 4 code : https://medium.com/@blewpri/master-detail-with-ionic-3-split-panes-866293608d47

[liamdebeasi]

Hi there,

I tried to reproduce the issue using the Stackblitz you provided, but the app could not compile. A working reproduction would be very useful in terms of helping getting to the bottom of this issue.

I understand you cannot post your exact code, but would you be able to post a simplified version of your code with only the code required to reproduce the issue? Otherwise it's a bit difficult to understand what you are trying to accomplish.

Thanks!

[amanitequeen]

Oh my bad I tried to reproduce issue on a blanck project, and it "worked". actually, I was trying to have this behavior :

• when the page is split, "masterNav" outlet contains the page "card", and "detailNav" outlet contains the page "buttons".
• When the page is not split, "masterNav" outlet contains the page "button" (and whatever detailNav can contains I don't care, it's hidden) On my application, I couldn't see the page button (it was actually not because of the issue I declared, I'll make another issue for the real cause). And I suspected the rooter to be the cause. I don't know why, but when you place a breakpoint here :

myOutlet.pop().then(() => {
        this.navCtrl.navigateRoot(["", { outlets: { detailNav: "path/to/thing"}}]).then(() => {
             /// breakpoint A
        });
});

and another here :

myOutlet.stackEvents.subscribe((event) => {
       //breakpoint B showing a "pop" event
});

breakpoint A will be hit before the B. I don't know if it's the expected behavior. If it is, you can close this issue.

Thanks for your responses

[mhartington]

Will look into why the method is not firing correctly, but I want to note that the blog post referenced here is for V3, which has a completely different routing system and navigation setup. This probably will not translate well to v4 as the router is now tied to a URL.

[amanitequeen]

Yes I know I am trying to migrate this code to a v4 compatible code, which would be possible if we replace ion nav by ion router outlets, but when outlets are named they don't work as expected (I made a new issue with the right problem description here : https://github.com/ionic-team/ionic/issues/17713) I couldn't see my component because of this (and I thank it was becausethe route was poped but it wasn't, the component was here but it had no height and I couldn't see it