refactor(angular): lazy loading tabs

angular/src/app-initialize.ts

@@ -1,4 +1,4 @@
-import { defineCustomElements } from '@ionic/core/loader';
+import * as c from '@ionic/core/loader';
 import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';
 
@@ -32,8 +32,104 @@ export function appInitialize(config: Config) {
         }
       };
 
-      // define all of Ionic's custom elements
-      defineCustomElements(win);
+      c.defineCustomElement(win, [
+        c.IonActionSheet,
+        c.IonActionSheetController,
+        c.IonAlert,
+        c.IonAlertController,
+        c.IonAnchor,
+        c.IonAnimationController,
+        c.IonApp,
+        c.IonAvatar,
+        c.IonBackButton,
+        c.IonBackdrop,
+        c.IonBadge,
+        c.IonButton,
+        c.IonButtons,
+        c.IonCard,
+        c.IonCardContent,
+        c.IonCardHeader,
+        c.IonCardSubtitle,
+        c.IonCardTitle,
+        c.IonCheckbox,
+        c.IonChip,
+        c.IonCol,
+        c.IonContent,
+        c.IonDatetime,
+        c.IonFab,
+        c.IonFabButton,
+        c.IonFabList,
+        c.IonFooter,
+        c.IonGrid,
+        c.IonHeader,
+        c.IonIcon,
+        c.IonImg,
+        c.IonInfiniteScroll,
+        c.IonInfiniteScrollContent,
+        c.IonInput,
+        c.IonItem,
+        c.IonItemDivider,
+        c.IonItemGroup,
+        c.IonItemOption,
+        c.IonItemOptions,
+        c.IonItemSliding,
+        c.IonLabel,
+        c.IonList,
+        c.IonListHeader,
+        c.IonLoading,
+        c.IonLoadingController,
+        c.IonMenu,
+        c.IonMenuButton,
+        c.IonMenuController,
+        c.IonMenuToggle,
+        c.IonModal,
+        c.IonModalController,
+        c.IonNav,
+        c.IonNavPop,
+        c.IonNavPush,
+        c.IonNavSetRoot,
+        c.IonNote,
+        c.IonPicker,
+        c.IonPickerColumn,
+        c.IonPickerController,
+        c.IonPopover,
+        c.IonPopoverController,
+        c.IonRadio,
+        c.IonRadioGroup,
+        c.IonRange,
+        c.IonRefresher,
+        c.IonRefresherContent,
+        c.IonReorder,
+        c.IonReorderGroup,
+        c.IonRippleEffect,
+        c.IonRoute,
+        c.IonRouteRedirect,
+        c.IonRouter,
+        c.IonRouterOutlet,
+        c.IonRow,
+        c.IonSearchbar,
+        c.IonSegment,
+        c.IonSegmentButton,
+        c.IonSelect,
+        c.IonSelectOption,
+        c.IonSelectPopover,
+        c.IonSkeletonText,
+        c.IonSlide,
+        c.IonSlides,
+        c.IonSpinner,
+        c.IonSplitPane,
+        c.IonTabBar,
+        c.IonTabButton,
+        c.IonText,
+        c.IonTextarea,
+        c.IonThumbnail,
+        c.IonTitle,
+        c.IonToast,
+        c.IonToastController,
+        c.IonToggle,
+        c.IonToolbar,
+        c.IonVirtualScroll
+      ]);
     }
   };
 }

angular/src/directives/index.ts

@@ -5,10 +5,9 @@ export { RadioValueAccessor } from './control-value-accessors/radio-value-access
 export { SelectValueAccessor } from './control-value-accessors/select-value-accessor';
 export { TextValueAccessor } from './control-value-accessors/text-value-accessor';
 
+export { IonTabs } from './navigation/ion-tabs';
 export { IonBackButtonDelegate } from './navigation/ion-back-button';
 export { NavDelegate } from './navigation/nav-delegate';
-export { TabDelegate } from './navigation/tab-delegate';
-export { TabsDelegate } from './navigation/tabs-delegate';
 export { IonRouterOutlet } from './navigation/ion-router-outlet';
 export { RouterLinkDelegate } from './navigation/router-link-delegate';
 export { NavParams } from './navigation/nav-params';

angular/src/directives/navigation/ion-router-outlet.ts

@@ -1,8 +1,9 @@
 import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, Input, NgZone, OnDestroy, OnInit, Optional, Output, ViewContainerRef } from '@angular/core';
 import { ActivatedRoute, ChildrenOutletContexts, OutletContext, PRIMARY_OUTLET, Router } from '@angular/router';
-import { RouteView, StackController } from './stack-controller';
+import { StackController } from './stack-controller';
 import { NavController } from '../../providers/nav-controller';
 import { bindLifecycleEvents } from '../../providers/angular-delegate';
+import { RouteView, getUrl } from './stack-utils';
 
 @Directive({
   selector: 'ion-router-outlet',
@@ -20,6 +21,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   private nativeEl: HTMLIonRouterOutletElement;
   private hasStack = false;
 
+  tabsPrefix: string | undefined;
+
   @Output('activate') activateEvents = new EventEmitter<any>();
   @Output('deactivate') deactivateEvents = new EventEmitter<any>();
 
@@ -43,18 +46,20 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     private location: ViewContainerRef,
     private resolver: ComponentFactoryResolver,
     @Attribute('name') name: string,
-    @Optional() @Attribute('stack') stack: any,
+    @Optional() @Attribute('tabs') tabs: string,
     private changeDetector: ChangeDetectorRef,
-    private navCtrl: NavController,
+    navCtrl: NavController,
     elementRef: ElementRef,
     router: Router,
-    zone: NgZone
+    zone: NgZone,
+    activatedRoute: ActivatedRoute
   ) {
     this.nativeEl = elementRef.nativeElement;
     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);
-    this.hasStack = stack !== 'false' && stack !== false;
-    this.stackCtrl = new StackController(this.hasStack, this.nativeEl, router, this.navCtrl, zone);
   }
 
   ngOnDestroy(): void {
@@ -169,32 +174,32 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       enteringView = this.stackCtrl.createView(this.activated, activatedRoute);
     }
 
-    const { direction, animated } = this.navCtrl.consumeTransition();
     this.activatedView = enteringView;
-    this.stackCtrl.setActive(enteringView, direction, animated).then(() => {
+    this.stackCtrl.setActive(enteringView).then(() => {
       this.activateEvents.emit(cmpRef.instance);
-      emitEvent(this.nativeEl);
+      emitEvent(this.nativeEl, enteringView!);
     });
   }
 
-  canGoBack(deep = 1) {
-    return this.stackCtrl.canGoBack(deep);
+  canGoBack(deep = 1, stackId?: string) {
+    return this.stackCtrl.canGoBack(deep, stackId);
   }
 
-  pop(deep = 1) {
-    return this.stackCtrl.pop(deep);
+  pop(deep = 1, stackId?: string) {
+    return this.stackCtrl.pop(deep, stackId);
   }
 
-  getLastUrl() {
-    const active = this.stackCtrl.getActive();
+  getLastUrl(stackId?: string) {
+    const active = this.stackCtrl.getLastUrl(stackId);
     return active ? active.url : undefined;
   }
 }
 
-function emitEvent(el: HTMLElement) {
+function emitEvent(el: HTMLElement, view: RouteView) {
   const ev = new CustomEvent('ionRouterOutletActivated', {
     bubbles: true,
     cancelable: true,
+    detail: { view }
   });
   el.dispatchEvent(ev);
 }

angular/src/directives/navigation/ion-tabs.ts

@@ -0,0 +1,69 @@
+import { Component, ContentChild, HostListener, ViewChild } from '@angular/core';
+import { TabButtonClickDetail } from '@ionic/core';
+import { IonRouterOutlet } from './ion-router-outlet';
+import { NavController } from '../../providers';
+import { IonTabBar } from '../proxies';
+import { RouteView } from './stack-utils';
+
+@Component({
+  selector: 'ion-tabs',
+  template: `
+    <div class="tabs-inner">
+      <ion-router-outlet #outlet tabs="true"></ion-router-outlet>
+    </div>
+    <ng-content></ng-content>`,
+  styles: [`
+    :host {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+
+      flex-direction: column;
+
+      width: 100%;
+      height: 100%;
+
+      contain: layout size style;
+      z-index: $z-index-page-container;
+    }
+    .tabs-inner {
+      position: relative;
+
+      flex: 1;
+
+      contain: layout size style;
+    }`
+  ]
+})
+export class IonTabs {
+
+  @ViewChild('outlet', { read: IonRouterOutlet }) outlet: IonRouterOutlet;
+  @ContentChild(IonTabBar) tabBar: IonTabBar | undefined;
+
+  constructor(
+    private navCtrl: NavController,
+  ) {}
+
+  @HostListener('ionRouterOutletActivated', ['$event.detail'])
+  onPageSelected(detail: {view: RouteView}) {
+    if (this.tabBar) {
+      this.tabBar.selectedTab = detail.view.stackId;
+    }
+  }
+
+  @HostListener('ionTabButtonClick', ['$event.detail'])
+  onTabButtonClick(detail: TabButtonClickDetail) {
+    const { tab, selected } = detail;
+    if (tab) {
+      const href = `${this.outlet.tabsPrefix}/${tab}`;
+      const url = selected
+        ? href
+        : this.outlet.getLastUrl(tab) || href;
+
+      this.navCtrl.navigateBack(url, true);
+    }
+  }
+}

angular/src/directives/navigation/router-link-delegate.ts

@@ -39,7 +39,6 @@ export class RouterLinkDelegate {
   private updateTargetUrlAndHref() {
     if (this.routerLink) {
       const href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.routerLink.urlTree));
-      console.log(href);
       this.elementRef.nativeElement.href = href;
     }
   }