Ionic 2モーダルが正しく表示されない

Question

example on the websiteに続いてIonic 2でモーダルを表示することをテストしようとしていますが、モーダルがコンテンツなしの灰色のオーバーレイとして表示されます。 （画像に見られるように）。 プロジェクトが作成されましたionic start demo1 sidemenu --v2

ボタンをクリックすると、モーダルを表示したいだけです。これはChromeとMSエッジでこのようrendeingさ

import { Component } from '@angular/core'; 
import { ModalController } from 'ionic-angular'; 
import { MyModal } from './modal/modal' 

@Component({ 
    selector: 'page-page1', 
    templateUrl: 'page1.html' 
}) 
export class Page1 { 

    constructor(public modalCtrl: ModalController) { 
    } 
    presentModal() { 
    let myModal = this.modalCtrl.create(MyModal); 
    myModal.present(); 
    } 

}

モーダルページ...

import { Component } from '@angular/core'; 
import { NavParams, ViewController } from 'ionic-angular'; 

@Component({ 
    template: ` 
<ion-content> 
    <h1>Hello</h1> 
</ion-content>> 
    ` 
}) 
export class MyModal { 

    constructor(public viewCtrl: ViewController, private params: NavParams) { 
    } 
} 

呼び出しページ...。ウィンドウが特定のサイズに縮小されても、内容は残っていないと、灰色の領域が消えます。

私には紛失しているものがありますか、これは既知の問題ですか？

Answer 1

私はこの問題を解決するために管理しています。

問題は

は、だから私は両方 declarationsと entryComponentsコレクションにMyModalを追加する必要があります...モーダルコンポーネントは、アプリケーション・モジュール・ファイルに定義されていなかったということでした

import { NgModule } from '@angular/core'; 
import { IonicApp, IonicModule } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { Page1 } from '../pages/page1/page1'; 
import { Page2 } from '../pages/page2/page2'; 
import { MyModal } from '../pages/page1/modal/modal'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    Page1, 
    Page2, 
    MyModal 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    Page1, 
    Page2, 
    MyModal 
    ], 
    providers: [] 
}) 
export class AppModule { }