I've been trying to implement a modal page in Ionic 2 from my home page, but I keep encountering this error:
TypeError: Cannot read property 'create' of undefined
at HomePage.showModal (http://localhost:8100/build/main.js:52608:35)
at CompiledTemplate.proxyViewClass.View_HomePage0.handleEvent_9 (/AppModule/HomePage/component.ngfactory.js:261:34)
at CompiledTemplate.proxyViewClass.<anonymous> (http://localhost:8100/build/main.js:90950:37)
at HTMLButtonElement.<anonymous> (http://localhost:8100/build/main.js:36597:36)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723)
at Object.onInvokeTask (http://localhost:8100/build/main.js:34668:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9659)
at e.runTask (http://localhost:8100/build/polyfills.js:3:7083)
at HTMLButtonElement.invoke (http://localhost:8100/build/polyfills.js:3:10836)
Here's my home.ts file:
import { Component } from '@angular/core';
import { NavController, NavParams, ViewController, ModalController } from 'ionic-angular';
import {ModalPage} from '../modal/modal';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
//nav;
tasks;
static get parameters(){
return [[NavController]]
}
constructor(
public nav : NavController,
public modalCtrl: ModalController
){
//this.nav = nav;
//this.modalCtrl = modalCtrl;
this.tasks=[
{task:'task1', priority:'low', status:'pending'},
{task:'task2', priority:'high', status:'pending'},
{task:'task3', priority:'normal', status:'pending'},
{task:'task4', priority:'low', status:'done'},
{task:'task5', priority:'high', status:'done'}
]
}
showModal(){
let modal = this.modalCtrl.create(ModalPage);
modal.present();
}
}
And here's my app.module.ts file:
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ModalPage } from '../pages/modal/modal'
@NgModule({
declarations: [
MyApp,
HomePage,
ModalPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ModalPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
I've been searching for a solution to this issue for hours, but I haven't been able to find a definitive answer. I've checked the documentation, but the provided code snippets don't seem to match my situation. Any help would be greatly appreciated, as I'm still new to Ionic 2.