Ionic 2: Dismiss modal from nested navigation

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/router.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/http.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
    <script src="config.js"></script>
    <script src="https://npmcdn.com/ionic-angular@2.0.0-beta.6/bundles/ionic.system.js"></script>
  
    <link href="https://npmcdn.com/ionic-angular@2.0.0-beta.6/bundles/ionic.ios.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <!-- this Ionic's root component and where the app will load -->
    <ion-app></ion-app>
    
    <script>
      System.import('app.ts')
    </script>
  </body>

</html>

import { Page, NavController, Modal, Platform } from 'ionic-angular/index';
import { ModalPage1 } from './modalPage1.ts'


@Page({
  templateUrl:"home.html"
})
export class HomePage {
  constructor(private nav: NavController, private platform: Platform) {}
  
  openModal() {
    let modal = Modal.create(ModalPage1);
    // Promise that is resolved when Modal is dismissed
    this.nav.present(modal); 
  }
}

SCROLL-CONTENT {
	overflow-y: auto !important;
}

CODE {
  background: #EFEFEF;
}

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    "emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		//"module": "commonjs",
		//"target": "es6"
  }
});

import { App, Platform } from 'ionic-angular/index';
import { HomePage } from './home.ts';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  constructor(private platform: Platform) {
    this.rootPage = HomePage;
  }
}

<ion-navbar *navbar>
  <ion-title>Demo</ion-title>
</ion-navbar>

<ion-content padding class="has-header">
  <h1>Demo for issue with closing modal from nested view</h1>
  
  <button block (click)="openModal()">Click to open modal</button>
</ion-content>

<ion-navbar *navbar hideBackButton="true">
  <ion-title>Modal Page #1</ion-title>
</ion-navbar>

<ion-content padding class="has-header">
  <h1>This is the modal page #1</h1>
  
  <button block (click)="goToSecondPage()">Click to navigate to second page</button>
</ion-content>

import { Page, NavController, ViewController } from 'ionic-angular/index';
import { ModalPage2 } from './modalPage2.ts'


@Page({
  templateUrl:"modalPage1.html"
})
export class ModalPage1 {
  constructor(private nav: NavController, private viewCtrl: ViewController) {}
	
  goToSecondPage() {
    this.nav.push(ModalPage2, {
      modal: this.viewCtrl
    });
  }
}

<ion-navbar *navbar hideBackButton="true">
  <ion-title>Modal Page #2</ion-title>
</ion-navbar>

<ion-content padding class="has-header">
  <h1>This is the modal page #2</h1>
  
  <button block (click)="closeModalPopToRoot()">Try to close modal with popToRoot()</button>
  <button block (click)="closeModalViewCtrilDismiss()">Try to close modal with ViewController.dismiss()</button>

</ion-content>

import { Page, NavController, NavParams } from 'ionic-angular/index';


@Page({
  templateUrl:"modalPage2.html"
})
export class ModalPage2 {
  constructor(private nav: NavController, private params: NavParams) {}
	
  closeModalPopToRoot() {
    this.nav.popToRoot({
      animate: true,
      animation: 'ios-transition',
      //duration: 400,
      direction: 'back'
    });
  }
  
  closeModalViewCtrilDismiss() {
    console.log(this.params.data.modal);
    this.params.data.modal.dismiss();
  }
}