fix(angular): fix sibling router-outlets (#16774)

fixes #16411

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.stackCtrl.destroy();
-    this.parentContexts.onChildOutletDestroyed(this.name);
   }
 
   getContext(): OutletContext | null {

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);
   }

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');
+  });
+});
+

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}'];

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
+      }
+    ]
   }
 ];
 

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,

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>

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>

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 {
+}

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>

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 {
+}

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>

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 {
+
+}

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>