refactor(angular): lazy loading tabs (#16637)

Fixes #16619

angular/test/test-app/src/app/app-routing.module.ts

@@ -6,6 +6,9 @@ import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
 import { HomePageComponent } from './home-page/home-page.component';
 import { TabsComponent } from './tabs/tabs.component';
+import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
+import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.component';
+import { TabsTab2Component } from './tabs-tab2/tabs-tab2.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
@@ -13,7 +16,40 @@ const routes: Routes = [
   { path: 'modals', component: ModalComponent },
   { path: 'router-link', component: RouterLinkComponent },
   { path: 'router-link-page', component: RouterLinkPageComponent },
-  { path: 'tabs', component: TabsComponent }
+  { path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
+  {
+    path: 'tabs',
+    component: TabsComponent,
+    children: [
+      {
+        path: 'account',
+        children: [
+          {
+            path: 'nested/:id',
+            component: TabsTab1NestedComponent
+          },
+          {
+            path: '',
+            component: TabsTab1Component
+          }
+        ]
+      },
+      {
+        path: 'contact',
+        children: [
+          {
+            path: 'one',
+            component: TabsTab2Component
+          },
+          {
+            path: '',
+            redirectTo: 'one',
+            pathMatch: 'full'
+          }
+        ]
+      }
+    ]
+  }
 ];
 
 @NgModule({

angular/test/test-app/src/app/app.module.ts

@@ -12,6 +12,9 @@ import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
 import { HomePageComponent } from './home-page/home-page.component';
 import { TabsComponent } from './tabs/tabs.component';
+import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
+import { TabsTab2Component } from './tabs-tab2/tabs-tab2.component';
+import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.component';
 
 @NgModule({
   declarations: [
@@ -22,7 +25,10 @@ import { TabsComponent } from './tabs/tabs.component';
     RouterLinkComponent,
     RouterLinkPageComponent,
     HomePageComponent,
-    TabsComponent
+    TabsComponent,
+    TabsTab1Component,
+    TabsTab2Component,
+    TabsTab1NestedComponent
   ],
   imports: [
     BrowserModule,

angular/test/test-app/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html

@@ -0,0 +1,16 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 1 - Page 2</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <h1>Welcome to NESTED PAGE</h1>
+  <p>
+    <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
+    <ion-button routerLink="/tabs/contact" id="goto-tab2-page1">Go to Tab 2 - Page 1</ion-button>
+  </p>
+</ion-content>

angular/test/test-app/src/app/tabs-tab1-nested/tabs-tab1-nested.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tabs-tab1-nested',
+  templateUrl: './tabs-tab1-nested.component.html',
+})
+export class TabsTab1NestedComponent { }

angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html

@@ -0,0 +1,12 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 1 - Page 1</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <h1>Welcome to Tab1</h1>
+  <p>
+    <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Page 2</ion-button>
+  </p>
+</ion-content>

angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tabs-tab1',
+  templateUrl: './tabs-tab1.component.html',
+})
+export class TabsTab1Component { }

angular/test/test-app/src/app/tabs-tab2/tabs-tab2.component.html

@@ -0,0 +1,13 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 2 - Page 1</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <h1>Welcome to Tab 2</h1>
+  <p>
+    <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
+    <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
+  </p>
+</ion-content>

angular/test/test-app/src/app/tabs-tab2/tabs-tab2.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tabs-tab2',
+  templateUrl: './tabs-tab2.component.html',
+})
+export class TabsTab2Component { }

angular/test/test-app/src/app/tabs/tabs.component.html

@@ -1,21 +1,12 @@
 <ion-tabs>
-  <ion-tab tab="tab-one">
-    <ion-router-outlet name="tab-one"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="tab-two">
-    <ion-router-outlet name="tab-one"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="tab-one">
+  <ion-tab-bar>
+    <ion-tab-button tab="account" id="account-tab-button">
       <ion-label>Tab One</ion-label>
       <ion-icon name="add"></ion-icon>
     </ion-tab-button>
-
-    <ion-tab-button tab="tab-two">
+    <ion-tab-button tab="contact" id="contact-tab-button">
       <ion-label>Tab Two</ion-label>
-      <ion-icon name="plane"></ion-icon>
+      <ion-icon name="logo-ionic"></ion-icon>
     </ion-tab-button>
   </ion-tab-bar>
 </ion-tabs>

angular/test/test-app/src/app/tabs/tabs.component.ts

@@ -4,6 +4,4 @@ import { Component } from '@angular/core';
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
 })
-export class TabsComponent {
-
-}
+export class TabsComponent { }