diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/angular/src/directives/navigation/ion-router-outlet.ts
index 6b4ec47ba4..60362d757b 100644
--- a/angular/src/directives/navigation/ion-router-outlet.ts
+++ b/angular/src/directives/navigation/ion-router-outlet.ts
@@ -308,8 +308,19 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
}
this.activatedView = enteringView;
+
+ /**
+ * The top outlet is set prior to the entering view's transition completing,
+ * so that when we have nested outlets (e.g. ion-tabs inside an ion-router-outlet),
+ * the tabs outlet will be assigned as the top outlet when a view inside tabs is
+ * activated.
+ *
+ * In this scenario, activeWith is called for both the tabs and the root router outlet.
+ * To avoid a race condition, we assign the top outlet synchronously.
+ */
+ this.navCtrl.setTopOutlet(this);
+
this.stackCtrl.setActive(enteringView).then((data) => {
- this.navCtrl.setTopOutlet(this);
this.activateEvents.emit(cmpRef.instance);
this.stackEvents.emit(data);
});
diff --git a/angular/test/base/e2e/src/tabs.spec.ts b/angular/test/base/e2e/src/tabs.spec.ts
index 589e8a1740..149ae79a1b 100644
--- a/angular/test/base/e2e/src/tabs.spec.ts
+++ b/angular/test/base/e2e/src/tabs.spec.ts
@@ -243,6 +243,74 @@ describe('Tabs', () => {
});
})
+ describe('entry url - /tabs/account', () => {
+ beforeEach(() => {
+ cy.visit('/tabs/account');
+ });
+ it('should pop to previous view when leaving tabs outlet', () => {
+
+ cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+ cy.get('#goto-tab1-page2').click();
+
+ cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+ cy.get('#goto-global').click();
+
+ cy.get('ion-title').should('contain.text', 'Global Page');
+
+ cy.get('#goto-prev-pop').click();
+
+ cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+ cy.get('#goto-prev').click();
+
+ cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+ /**
+ * Verifies that when entering the tabs outlet directly,
+ * the navController.pop() method does not pop the previous view,
+ * when you are at the root of the tabs outlet.
+ */
+ cy.get('#goto-previous-page').click();
+ cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+ });
+ });
+
+ describe('entry url - /', () => {
+ it('should pop to the root outlet from the tabs outlet', () => {
+ cy.visit('/');
+
+ cy.get('ion-title').should('contain.text', 'Test App');
+
+ cy.get('ion-item').contains('Tabs test').click();
+
+ cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+ cy.get('#goto-tab1-page2').click();
+
+ cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+ cy.get('#goto-global').click();
+
+ cy.get('ion-title').should('contain.text', 'Global Page');
+
+ cy.get('#goto-prev-pop').click();
+
+ cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+ cy.get('#goto-prev').click();
+
+ cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+ cy.get('#goto-previous-page').click();
+
+ cy.get('ion-title').should('contain.text', 'Test App');
+
+ });
+ });
+
+
describe('entry url - /tabs/account/nested/1', () => {
beforeEach(() => {
cy.visit('/tabs/account/nested/1');
diff --git a/angular/test/base/src/app/app-routing.module.ts b/angular/test/base/src/app/app-routing.module.ts
index f40f265118..e03345759f 100644
--- a/angular/test/base/src/app/app-routing.module.ts
+++ b/angular/test/base/src/app/app-routing.module.ts
@@ -55,6 +55,10 @@ const routes: Routes = [
path: 'tabs',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
},
+ {
+ path: 'tabs-global',
+ loadChildren: () => import('./tabs-global/tabs-global.module').then(m => m.TabsGlobalModule)
+ },
{
path: 'nested-outlet',
component: NestedOutletComponent,
@@ -68,7 +72,7 @@ const routes: Routes = [
component: NestedOutletPage2Component
}
]
- }
+ },
];
@NgModule({
diff --git a/angular/test/base/src/app/tabs-global/tabs-global-routing.module.ts b/angular/test/base/src/app/tabs-global/tabs-global-routing.module.ts
new file mode 100644
index 0000000000..e7ddb717b5
--- /dev/null
+++ b/angular/test/base/src/app/tabs-global/tabs-global-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { TabsGlobalComponent } from "./tabs-global.component";
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([
+ {
+ path: '',
+ component: TabsGlobalComponent
+ }
+ ])
+ ],
+ exports: [RouterModule]
+})
+export class TabsGlobalRoutingModule { }
diff --git a/angular/test/base/src/app/tabs-global/tabs-global.component.html b/angular/test/base/src/app/tabs-global/tabs-global.component.html
new file mode 100644
index 0000000000..ec31c49344
--- /dev/null
+++ b/angular/test/base/src/app/tabs-global/tabs-global.component.html
@@ -0,0 +1,17 @@
+