CODEWITHSUNDEEP
angulartypescriptionic2
Ujjwal Syal
Ujjwal Syal

Reputation: 387

Ionic 2 modalcontroller initialisation error, can't read create attribute of undefined

I am trying to show a modal page in ionic 2 from my home page. But I keep getting 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)

This is my home.ts -

    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();
}


}

This is my app.module.ts - 

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 have spent hours on searching the reason for this and wasn't able to find a proper reason. I have also looked at the docs but the code snippets don't match.

I would really appreciate some help. I am very new to Ionic 2.

Upvotes: 1

Views: 986

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29614

If you are get parameters using do,

static get parameters(){
        return [[NavController],[ModalController]]
    }

as all the constructor parameters should be set here.

Or remove static get parameters() method entirely as it is not really required.

Upvotes: 2

Related Questions