fix(nav): ionViewDidLoad is called after ngAfterViewInit

fixes #8449
fixes #8414

src/components/loading/loading-component.ts

@@ -4,7 +4,7 @@ import { Config } from '../../config/config';
 import { isDefined, isUndefined } from '../../util/util';
 import { NavParams } from '../../navigation/nav-params';
 import { ViewController } from '../../navigation/view-controller';
-
+import { LoadingOptions } from './loading-options';
 
 /**
 * @private
@@ -25,15 +25,7 @@ import { ViewController } from '../../navigation/view-controller';
   encapsulation: ViewEncapsulation.None,
 })
 export class LoadingCmp {
-  d: {
-    spinner?: string;
-    content?: string;
-    cssClass?: string;
-    showBackdrop?: boolean;
-    dismissOnPageChange?: boolean;
-    delay?: number;
-    duration?: number;
-  };
+  d: LoadingOptions;
   id: number;
   showSpinner: boolean;
   durationTimeout: number;

src/components/modal/modal-component.ts

@@ -30,7 +30,7 @@ export class ModalCmp {
     this._bdDismiss = _navParams.data.opts.enableBackdropDismiss;
   }
 
-  ngAfterViewInit() {
+  ionViewWillLoad() {
     this._load(this._navParams.data.component);
   }
 

src/components/modal/test/basic/app-module.ts

@@ -130,12 +130,18 @@ export class E2EPage {
         </ion-item>
       </ion-list>
       <button ion-button full (click)="submit()">Submit</button>
+      <p>ionViewDidLoad ({{called.ionViewDidLoad}})</p>
+      <p>ionViewWillEnter ({{called.ionViewWillEnter}})</p>
+      <p>ionViewDidEnter ({{called.ionViewDidEnter}})</p>
+      <p>ionViewWillLeave ({{called.ionViewWillLeave}})</p>
+      <p>ionViewDidLeave ({{called.ionViewDidLeave}})</p>
     </ion-content>
   `,
   providers: [SomeComponentProvider]
 })
 export class ModalPassData {
   data: any;
+  called: any;
 
   constructor(
     public viewCtrl: ViewController,
@@ -148,6 +154,14 @@ export class ModalPassData {
       name: someComponentProvider.getName()
     };
     console.log('SomeAppProvider Data', someAppProvider.getData());
+
+    this.called = {
+      ionViewDidLoad: 0,
+      ionViewWillEnter: 0,
+      ionViewDidEnter: 0,
+      ionViewWillLeave: 0,
+      ionViewDidLeave: 0
+    };
   }
 
   submit() {
@@ -157,10 +171,12 @@ export class ModalPassData {
 
   ionViewDidLoad() {
     console.log('ModalPassData ionViewDidLoad fired');
+    this.called.ionViewDidLoad++;
   }
 
   ionViewWillEnter() {
     console.log('ModalPassData ionViewWillEnter fired');
+    this.called.ionViewWillEnter++;
   }
 
   ionViewDidEnter() {
@@ -169,14 +185,17 @@ export class ModalPassData {
       message: 'test toast',
       duration: 1000
     }).present();
+    this.called.ionViewDidEnter++;
   }
 
   ionViewWillLeave() {
     console.log('ModalPassData ionViewWillLeave fired');
+    this.called.ionViewWillLeave++;
   }
 
   ionViewDidLeave() {
     console.log('ModalPassData ionViewDidLeave fired');
+    this.called.ionViewDidLeave++;
   }
 }
 
@@ -341,6 +360,11 @@ export class ContactUs {
       <p>
         <button ion-button (click)="openActionSheet()">Open Action Sheet</button>
       </p>
+      <p>ionViewDidLoad ({{called.ionViewDidLoad}})</p>
+      <p>ionViewWillEnter ({{called.ionViewWillEnter}})</p>
+      <p>ionViewDidEnter ({{called.ionViewDidEnter}})</p>
+      <p>ionViewWillLeave ({{called.ionViewWillLeave}})</p>
+      <p>ionViewDidLeave ({{called.ionViewDidLeave}})</p>
       <div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
       <div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
       <ion-list>
@@ -353,6 +377,7 @@ export class ContactUs {
 })
 export class ModalFirstPage {
   items: any[] = [];
+  called: any;
 
   constructor(
     public navCtrl: NavController,
@@ -364,6 +389,14 @@ export class ModalFirstPage {
         value: (i + 1)
       });
     }
+
+    this.called = {
+      ionViewDidLoad: 0,
+      ionViewWillEnter: 0,
+      ionViewDidEnter: 0,
+      ionViewWillLeave: 0,
+      ionViewDidLeave: 0
+    };
   }
 
   push() {
@@ -379,10 +412,12 @@ export class ModalFirstPage {
 
   ionViewDidLoad() {
     console.log('ModalFirstPage ionViewDidLoad fired');
+    this.called.ionViewDidLoad++;
   }
 
   ionViewWillEnter() {
     console.log('ModalFirstPage ionViewWillEnter fired');
+    this.called.ionViewWillEnter++;
   }
 
   ionViewDidEnter() {
@@ -397,6 +432,15 @@ export class ModalFirstPage {
       ]
     });
     alert.present();
+    this.called.ionViewDidEnter++;
+  }
+
+  ionViewWillLeave() {
+    this.called.ionViewWillLeave++;
+  }
+
+  ionViewDidLeave() {
+    this.called.ionViewDidLeave++;
   }
 
   openActionSheet() {

src/components/popover/popover-component.ts

@@ -60,7 +60,7 @@ export class PopoverCmp {
     this.id = (++popoverIds);
   }
 
-  ngAfterViewInit() {
+  ionViewWillLoad() {
     let activeElement: any = document.activeElement;
     if (document.activeElement) {
       activeElement.blur();

src/navigation/nav-controller-base.ts

@@ -390,17 +390,9 @@ export class NavControllerBase extends Ion implements NavController {
       // batch all of lifecycles together
       var view = destroyQueue[i];
       if (view && view !== enteringView && view !== leavingView) {
-        view._willLeave();
-        this.viewWillLeave.emit(view);
-        this._app.viewWillLeave.emit(view);
-
-        view._didLeave();
-        this.viewDidLeave.emit(view);
-        this._app.viewDidLeave.emit(view);
-
-        view._willUnload();
-        this.viewWillUnload.emit(view);
-        this._app.viewWillUnload.emit(view);
+        this._willLeave(view);
+        this._didLeave(view);
+        this._willUnload(view);
       }
     }
     for (var i = 0; i < destroyQueue.length; i++) {
@@ -571,20 +563,19 @@ export class NavControllerBase extends Ion implements NavController {
 
   _viewInsert(view: ViewController, componentRef: ComponentRef<any>, viewport: ViewContainerRef) {
     // successfully finished loading the entering view
-    // fire off the "loaded" lifecycle events
-    view._didLoad();
-    this.viewDidLoad.emit(view);
-    this._app.viewDidLoad.emit(view);
+    // fire off the "didLoad" lifecycle events
+    this._willLoad(view);
+    this._didLoad(view);
 
     // render the component ref instance to the DOM
     // ******** DOM WRITE ****************
     viewport.insert(componentRef.hostView, viewport.length);
     view._state = ViewState.PRE_RENDERED;
 
-    // the ElementRef of the actual ion-page created
-    const pageElement = componentRef.location.nativeElement;
-
     if (view._cssClass) {
+      // the ElementRef of the actual ion-page created
+      var pageElement = componentRef.location.nativeElement;
+
       // ******** DOM WRITE ****************
       this._renderer.setElementClass(pageElement, view._cssClass, true);
     }
@@ -666,17 +657,8 @@ export class NavControllerBase extends Ion implements NavController {
 
   _viewsWillLifecycles(enteringView: ViewController, leavingView: ViewController) {
     // call each view's lifecycle events
-    if (enteringView) {
-      enteringView._willEnter();
-      this.viewWillEnter.emit(enteringView);
-      this._app.viewWillEnter.emit(enteringView);
-    }
-
-    if (leavingView) {
-      leavingView._willLeave();
-      this.viewWillLeave.emit(leavingView);
-      this._app.viewWillLeave.emit(leavingView);
-    }
+    enteringView && this._willEnter(enteringView);
+    leavingView && this._willLeave(leavingView);
   }
 
   _trnsFinish(trns: Transition, opts: NavOptions, resolve: TransitionResolveFn) {
@@ -690,16 +672,12 @@ export class NavControllerBase extends Ion implements NavController {
       // transition has completed (went from 0 to 1)
       if (trns.enteringView) {
         enteringName = trns.enteringView.name;
-        trns.enteringView._didEnter();
-        this.viewDidEnter.emit(trns.enteringView);
-        this._app.viewDidEnter.emit(trns.enteringView);
+        this._didEnter(trns.enteringView);
       }
 
       if (trns.leavingView) {
         leavingName = trns.leavingView.name;
-        trns.leavingView._didLeave();
-        this.viewDidLeave.emit(trns.leavingView);
-        this._app.viewDidLeave.emit(trns.leavingView);
+        this._didLeave(trns.leavingView);
       }
 
       this._cleanup(trns.enteringView);
@@ -744,9 +722,7 @@ export class NavControllerBase extends Ion implements NavController {
       if (i > activeViewIndex) {
         // this view comes after the active view
         // let's unload it
-        view._willUnload();
-        this.viewWillUnload.emit(view);
-        this._app.viewWillUnload.emit(view);
+        this._willUnload(view);
         view._destroy(this._renderer);
 
       } else if (i < activeViewIndex && !this._isPortal) {
@@ -769,6 +745,47 @@ export class NavControllerBase extends Ion implements NavController {
     }
   }
 
+  _willLoad(view: ViewController) {
+    view._willLoad();
+  }
+
+  _didLoad(view: ViewController) {
+    view._didLoad();
+    this.viewDidLoad.emit(view);
+    this._app.viewDidLoad.emit(view);
+  }
+
+  _willEnter(view: ViewController) {
+    view._willEnter();
+    this.viewWillEnter.emit(view);
+    this._app.viewWillEnter.emit(view);
+  }
+
+  _didEnter(view: ViewController) {
+    view._didEnter();
+    this.viewDidEnter.emit(view);
+    this._app.viewDidEnter.emit(view);
+  }
+
+  _willLeave(view: ViewController) {
+    view._willLeave();
+    this.viewWillLeave.emit(view);
+    this._app.viewWillLeave.emit(view);
+  }
+
+  _didLeave(view: ViewController) {
+    view._didLeave();
+    this.viewDidLeave.emit(view);
+    this._app.viewDidLeave.emit(view);
+  }
+
+  _willUnload(view: ViewController) {
+    view._willUnload();
+    this.viewWillUnload.emit(view);
+    this._app.viewWillUnload.emit(view);
+  }
+
+
   getActiveChildNav(): any {
     return this._children[this._children.length - 1];
   }

src/navigation/view-controller.ts

@@ -408,6 +408,13 @@ export class ViewController {
     }
   }
 
+  /**
+   * @private
+   */
+  _willLoad() {
+    ctrlFn(this, 'WillLoad');
+  }
+
   /**
    * @private
    * The view has loaded. This event only happens once per view being