bug: NavController.pop() doesn't work when leave Tabs layout.

[evgeniyefimov]

Bug Report

Ionic version:

• 4.5.0
• v5.x
• v6.x

Current behavior:

When I call navCtrl.pop from a nested outlet which is not in a tab, it redirects back to the right tab which has some nav stack, but then navCtrl.pop doesn't work. With ion-back-button it works fine.

Expected behavior:

NavContoller.pop() should be able to navigate to the correct page in nav stack as ion-back-button does.

Steps to reproduce:

https://github.com/sean-perkins/gh-18593-nav-pop

1. Start on: http://localhost:4200/tabs/tab1/item1
2. Click "Go to Item 2 Page"
3. Click "Go to Global Page"
4. Click "Go to Page 2 Programmatically"
5. Click "Go to Page 1 Programmatically"
6. Observe: Tab does not pop to the previous view
7. Click ion-back-button (< Item 2 Page)
8. Observe: Tab pops to the previous view

Expected:

• Clicking "Go to Page 1 Programmatically" should pop to the previous view in the tab

[TrulsLoug]

Same issue here

[NicolasVargas]

Any news about this issue ?

[fhouenou]

Any update on this?

[sean-perkins]

I've updated this issue with an up-to-date reproduction of the issue.

An alternative pattern to avoid this issue is to use IonRouterOutlet as a provider instead of NavController.

For example, in the Item2Page1 component:

@Component({
  selector: 'app-item21',
  templateUrl: 'item2.page.html',
})
export class Item2Page {
  constructor(@Optional() private ionRouterOutlet: IonRouterOutlet) { }

  async goBack() {
    return this.ionRouterOutlet.pop();
  }
}

Results in the "Go to Page 1 Programmatically" button popping to the correct view.

My assessment of the issue is that NavController is not finding the correct top outlet when performing a pop operation. I will need to create a debug build to see why the ion-router-outlet implementation is not assigning the correct top outlet.

[sean-perkins]

Ok the problem is here: https://github.com/ionic-team/ionic-framework/blob/main/angular/src/directives/navigation/ion-router-outlet.ts#L311-L315

When navigating from a page outside the tabs outlet back into the outlet, activateWith is invoked twice for the router outlet.

• Setting the active outlet to the primary ion-router-outlet
• Setting the active outlet to the active tab's ion-router-outlet

However, the promise resolves out of the expected order, so even though setting the active outlet to the tab is invoked last, the promise resolves before setting the active outlet to the primary outlet. This results in the top outlet being set to the root ion-router-outlet, which cannot be "popped".

Likely this implementation needs to be changed to a queue with rxjs, to guarantee the order of when setting the active entering view, coincides with the order of which should be activated.

[sean-perkins]

Updated dev-build available for testing:

npm install @ionic/[email protected]

[EinfachHans]

Dev build works fine for us! 😊

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.