fix(modal): alerts do not trigger modal lifecycle events

fixes #8616

Author: manucorporat

src/components/app/app-root.ts

@@ -15,6 +15,7 @@ export const AppRootToken = new OpaqueToken('USERROOT');
   selector: 'ion-app',
   template:
     '<div #viewport app-viewport></div>' +
+    '<div #modalPortal overlay-portal></div>' +
     '<div #overlayPortal overlay-portal></div>' +
     '<div #loadingPortal class="loading-portal" overlay-portal></div>' +
     '<div #toastPortal class="toast-portal" overlay-portal></div>' +
@@ -24,6 +25,8 @@ export class IonicApp extends Ion implements OnInit {
 
   @ViewChild('viewport', {read: ViewContainerRef}) _viewport: ViewContainerRef;
 
+  @ViewChild('modalPortal', { read: OverlayPortal }) _modalPortal: OverlayPortal;
+
   @ViewChild('overlayPortal', { read: OverlayPortal }) _overlayPortal: OverlayPortal;
 
   @ViewChild('loadingPortal', { read: OverlayPortal }) _loadingPortal: OverlayPortal;
@@ -96,6 +99,9 @@ export class IonicApp extends Ion implements OnInit {
     if (portal === AppPortal.TOAST) {
       return this._toastPortal;
     }
+    if (portal === AppPortal.MODAL) {
+      return this._modalPortal;
+    }
     return this._overlayPortal;
   }
 
@@ -110,6 +116,7 @@ export class IonicApp extends Ion implements OnInit {
 
 export enum AppPortal {
   DEFAULT,
+  MODAL,
   LOADING,
   TOAST
 };

src/components/modal/modal.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 
 import { App } from '../app/app';
+import { AppPortal } from '../app/app-root';
 import { isPresent } from '../../util/util';
 import { ModalCmp } from './modal-component';
 import { ModalOptions } from './modal-options';
@@ -40,7 +41,7 @@ export class Modal extends ViewController {
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
   present(navOptions: NavOptions = {}) {
-    return this._app.present(this, navOptions);
+    return this._app.present(this, navOptions, AppPortal.MODAL);
   }
 
   /**