From 35e3848d965b0140211c3709c75a60d5567bd20d Mon Sep 17 00:00:00 2001
From: Manu MA <manu.valladolid@gmail.com>
Date: Mon, 17 Dec 2018 01:49:56 +0100
Subject: [PATCH] fix(angular): fix sibling router-outlets (#16774)

fixes #16411
---
 .../navigation/ion-router-outlet.ts           |  4 +---
 .../directives/navigation/stack-controller.ts |  7 ++++++
 .../e2e/src/nested-outlet.e2e-spec.ts         | 23 +++++++++++++++++++
 angular/test/test-app/e2e/src/utils.ts        |  4 ++++
 .../test-app/src/app/app-routing.module.ts    | 18 ++++++++++++++-
 angular/test/test-app/src/app/app.module.ts   |  8 ++++++-
 .../app/home-page/home-page.component.html    |  5 ++++
 .../nested-outlet-page.component.html         |  7 ++++++
 .../nested-outlet-page.component.ts           |  8 +++++++
 .../nested-outlet-page2.component.html        |  6 +++++
 .../nested-outlet-page2.component.ts          |  8 +++++++
 .../nested-outlet.component.html              | 10 ++++++++
 .../nested-outlet/nested-outlet.component.ts  |  9 ++++++++
 .../app/tabs-tab1/tabs-tab1.component.html    |  1 +
 14 files changed, 113 insertions(+), 5 deletions(-)
 create mode 100644 angular/test/test-app/e2e/src/nested-outlet.e2e-spec.ts
 create mode 100644 angular/test/test-app/src/app/nested-outlet-page/nested-outlet-page.component.html
 create mode 100644 angular/test/test-app/src/app/nested-outlet-page/nested-outlet-page.component.ts
 create mode 100644 angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.html
 create mode 100644 angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.ts
 create mode 100644 angular/test/test-app/src/app/nested-outlet/nested-outlet.component.html
 create mode 100644 angular/test/test-app/src/app/nested-outlet/nested-outlet.component.ts

diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/angular/src/directives/navigation/ion-router-outlet.ts
index c781f315ea..2be3f09779 100644
--- a/angular/src/directives/navigation/ion-router-outlet.ts
+++ b/angular/src/directives/navigation/ion-router-outlet.ts
@@ -62,13 +62,11 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     this.name = name || PRIMARY_OUTLET;
     this.tabsPrefix = tabs === 'true' ? getUrl(router, activatedRoute) : undefined;
     this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone);
-
     parentContexts.onChildOutletCreated(this.name, this as any);
   }
 
   ngOnDestroy(): void {
-    console.log('router-outlet destroyed');
-    this.parentContexts.onChildOutletDestroyed(this.name);
+    this.stackCtrl.destroy();
   }
 
   getContext(): OutletContext | null {
diff --git a/angular/src/directives/navigation/stack-controller.ts b/angular/src/directives/navigation/stack-controller.ts
index f2955e0018..e010406221 100644
--- a/angular/src/directives/navigation/stack-controller.ts
+++ b/angular/src/directives/navigation/stack-controller.ts
@@ -94,6 +94,13 @@ export class StackController {
     return this.activeView ? this.activeView.stackId : undefined;
   }
 
+  destroy() {
+    this.containerEl = undefined!;
+    this.views.forEach(destroyView);
+    this.activeView = undefined;
+    this.views = [];
+  }
+
   private getStack(stackId: string | undefined) {
     return this.views.filter(v => v.stackId === stackId);
   }
diff --git a/angular/test/test-app/e2e/src/nested-outlet.e2e-spec.ts b/angular/test/test-app/e2e/src/nested-outlet.e2e-spec.ts
new file mode 100644
index 0000000000..7c15a29866
--- /dev/null
+++ b/angular/test/test-app/e2e/src/nested-outlet.e2e-spec.ts
@@ -0,0 +1,23 @@
+import { browser, element, by } from 'protractor';
+import { waitTime, handleErrorMessages, goBack } from './utils';
+
+describe('nested-outlet', () => {
+
+  afterEach(() => {
+    handleErrorMessages();
+  });
+
+  it('should navigate correctly', async () => {
+    await browser.get('/nested-outlet/page');
+    expect(await element(by.css('ion-router-outlet ion-router-outlet app-nested-outlet-page h1')).getText()).toEqual('Nested page 1');
+
+    await element(by.css('#goto-tabs')).click();
+    await waitTime(500);
+    await element(by.css('#goto-nested-page1')).click();
+    await waitTime(500);
+    await element(by.css('#goto-nested-page2')).click();
+    await waitTime(500);
+    expect(await element(by.css('ion-router-outlet ion-router-outlet app-nested-outlet-page2 h1')).getText()).toEqual('Nested page 2');
+  });
+});
+
diff --git a/angular/test/test-app/e2e/src/utils.ts b/angular/test/test-app/e2e/src/utils.ts
index c301366653..e02a3147c9 100644
--- a/angular/test/test-app/e2e/src/utils.ts
+++ b/angular/test/test-app/e2e/src/utils.ts
@@ -1,5 +1,9 @@
 import { browser } from 'protractor';
 
+export function goBack() {
+  return browser.executeScript(`return window.history.back()`);
+}
+
 export function getProperty(selector: string, property: string) {
   return browser.executeScript(`
     return document.querySelector('${selector}')['${property}'];
diff --git a/angular/test/test-app/src/app/app-routing.module.ts b/angular/test/test-app/src/app/app-routing.module.ts
index 0be12e9767..bcb3fa54a6 100644
--- a/angular/test/test-app/src/app/app-routing.module.ts
+++ b/angular/test/test-app/src/app/app-routing.module.ts
@@ -11,6 +11,9 @@ import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.com
 import { TabsTab2Component } from './tabs-tab2/tabs-tab2.component';
 import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
 import { VirtualScrollDetailComponent } from './virtual-scroll-detail/virtual-scroll-detail.component';
+import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
+import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-page.component';
+import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
@@ -20,7 +23,6 @@ const routes: Routes = [
   { path: 'router-link-page', component: RouterLinkPageComponent },
   { path: 'virtual-scroll', component: VirtualScrollComponent },
   { path: 'virtual-scroll-detail/:itemId', component: VirtualScrollDetailComponent },
-
   { path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
   {
     path: 'tabs',
@@ -58,6 +60,20 @@ const routes: Routes = [
         loadChildren: './tabs-lazy/tabs-lazy.module#TabsLazyModule'
       }
     ]
+  },
+  {
+    path: 'nested-outlet',
+    component: NestedOutletComponent,
+    children: [
+      {
+        path: 'page',
+        component: NestedOutletPageComponent
+      },
+      {
+        path: 'page2',
+        component: NestedOutletPage2Component
+      }
+    ]
   }
 ];
 
diff --git a/angular/test/test-app/src/app/app.module.ts b/angular/test/test-app/src/app/app.module.ts
index 00c2fed534..797c01e286 100644
--- a/angular/test/test-app/src/app/app.module.ts
+++ b/angular/test/test-app/src/app/app.module.ts
@@ -18,6 +18,9 @@ import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.com
 import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
 import { VirtualScrollDetailComponent } from './virtual-scroll-detail/virtual-scroll-detail.component';
 import { VirtualScrollInnerComponent } from './virtual-scroll-inner/virtual-scroll-inner.component';
+import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
+import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-page.component';
+import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
 
 @NgModule({
   declarations: [
@@ -34,7 +37,10 @@ import { VirtualScrollInnerComponent } from './virtual-scroll-inner/virtual-scro
     TabsTab1NestedComponent,
     VirtualScrollComponent,
     VirtualScrollDetailComponent,
-    VirtualScrollInnerComponent
+    VirtualScrollInnerComponent,
+    NestedOutletComponent,
+    NestedOutletPageComponent,
+    NestedOutletPage2Component
   ],
   imports: [
     BrowserModule,
diff --git a/angular/test/test-app/src/app/home-page/home-page.component.html b/angular/test/test-app/src/app/home-page/home-page.component.html
index ed6721f4e0..6baec55e1f 100644
--- a/angular/test/test-app/src/app/home-page/home-page.component.html
+++ b/angular/test/test-app/src/app/home-page/home-page.component.html
@@ -32,5 +32,10 @@
           Virtual Scroll
         </ion-label>
       </ion-item>
+      <ion-item routerLink="/nested-outlet/page">
+        <ion-label>
+          Nested ion-router-outlet
+        </ion-label>
+      </ion-item>
     </ion-list>
   </ion-content>
diff --git a/angular/test/test-app/src/app/nested-outlet-page/nested-outlet-page.component.html b/angular/test/test-app/src/app/nested-outlet-page/nested-outlet-page.component.html
new file mode 100644
index 0000000000..c599655a8a
--- /dev/null
+++ b/angular/test/test-app/src/app/nested-outlet-page/nested-outlet-page.component.html
@@ -0,0 +1,7 @@
+<ion-content>
+  <h1>Nested page 1</h1>
+  <p>
+    <ion-button routerLink="/tabs" id="goto-tabs">Go To Tabs</ion-button>
+    <ion-button routerLink="/nested-outlet/page2" id="goto-nested-page2">Go To SECOND</ion-button>
+  </p>
+</ion-content>
diff --git a/angular/test/test-app/src/app/nested-outlet-page/nested-outlet-page.component.ts b/angular/test/test-app/src/app/nested-outlet-page/nested-outlet-page.component.ts
new file mode 100644
index 0000000000..263aacbee3
--- /dev/null
+++ b/angular/test/test-app/src/app/nested-outlet-page/nested-outlet-page.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-nested-outlet-page',
+  templateUrl: './nested-outlet-page.component.html',
+})
+export class NestedOutletPageComponent {
+}
diff --git a/angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.html b/angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.html
new file mode 100644
index 0000000000..67303be072
--- /dev/null
+++ b/angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.html
@@ -0,0 +1,6 @@
+<ion-content>
+    <h1>Nested page 2</h1>
+    <p>
+      <ion-button routerLink="/nested-outlet/page">Go To FIRST</ion-button>
+    </p>
+  </ion-content>
diff --git a/angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.ts b/angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.ts
new file mode 100644
index 0000000000..9794d11d74
--- /dev/null
+++ b/angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-nested-outlet-page2',
+  templateUrl: './nested-outlet-page2.component.html',
+})
+export class NestedOutletPage2Component {
+}
diff --git a/angular/test/test-app/src/app/nested-outlet/nested-outlet.component.html b/angular/test/test-app/src/app/nested-outlet/nested-outlet.component.html
new file mode 100644
index 0000000000..336f1707d3
--- /dev/null
+++ b/angular/test/test-app/src/app/nested-outlet/nested-outlet.component.html
@@ -0,0 +1,10 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      NESTED OUTLET
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-router-outlet></ion-router-outlet>
+</ion-content>
diff --git a/angular/test/test-app/src/app/nested-outlet/nested-outlet.component.ts b/angular/test/test-app/src/app/nested-outlet/nested-outlet.component.ts
new file mode 100644
index 0000000000..aa435d1b80
--- /dev/null
+++ b/angular/test/test-app/src/app/nested-outlet/nested-outlet.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-nested-outlet',
+  templateUrl: './nested-outlet.component.html',
+})
+export class NestedOutletComponent {
+
+}
diff --git a/angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html b/angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html
index b1b6da8551..b61249a61e 100644
--- a/angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html
+++ b/angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html
@@ -9,5 +9,6 @@
   <p>
     <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Page 2</ion-button>
     <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
+    <ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
   </p>
 </ion-content>