Modal not working with tabs because of nav[_tabs] if statement


I’m trying simply to make a modal show up on my page, but when I click the card that would bring up the modal nothing happens. So, I put a break point on the navController.present function I saw this code:

             // TODO: must have until this goes in
             void 0;

I saw when I went to that issue link that the issue had been resolved with new releases but I’ve updated to beta.10

"dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/http": "2.0.0-rc.3",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.10",
    "ionic-native": "1.2.4",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "2.0.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "run-sequence": "1.1.5"

but when I navigate in my own project to the nav component in the ionic-angular node module, I still see the code above.

So the question is two fold. Am I using the modal correctly with tabs?(the modal code is identical to that on the docs page)? or Am I making an error when I update my project?

TIA, i’ve been banging my head with this one for almost a week now.


Here is where I how I have the tabs in my app.html:

<ion-tabs greenTheme [selectedIndex]="index">
    <ion-tab tabIcon="people" #content tabTitle="My Roster" [root]="tab2"></ion-tab>
    <ion-tab tabIcon="stats" #content tabTitle="Wage Overview" [root]="tab1"></ion-tab>

Obviously index is a variable in my app.ts. It starts as 1 if that matters. I assign the variables “tab1” and “tab2” to different pages ( now components ) in the constructor in my app.ts file.

In one of the pages is where I want to modal to show. It will show upon tapping a card in order to get more in depth information about the card. Here is the code for that:


    <ion-card (click)='presentModal()' class='custom-card'>
            Sched. Accuracy

and the .ts file-

    presentModal() {
        let myModal = Modal.create(AccModal, {param: "something"});
        console.log('myModal is ', myModal);
        console.log("function being called");

The actual modal class code is here:

@Component ({
    template: `
        <ion-card class='popover'>
                Sched Accuracy {{accNumber}}%: {{globalService.currentTitle}} Breakdown
                <ion-list inset>
                    <ion-item *ngFor="let d of accCardData">
                        <span class='pop-data'>{{d.title}}</span><span class='pop-data right'>{{d.percentage}}%</span>

export class AccModal {

    accCardData: any [];
    accNumber: number
    constructor(public params: NavParams, public http:Http) {
        console.log("params is ", params.get('param'));
        this.accNumber = 71;


   getAccdata (){
            .map(res => res.json())
                data => this.accCardData = data,
                err => console.log(err)

Hopefully this sheds some light on what’s going on


Hmm I just started a tabs project and I’m not able to recreate this.
Could you share some code?


Just added it to the original question


The root of the issue may be in the updating to beta.10. I saw in the docs that I should no longer be doing navController.present, but to do it with the ModalController. However, when I run:

npm install --save ionic-angular@2.0.0-beta.10 @angular/common@2.0.0-rc.3 @angular/compiler@2.0.0-rc.3 @angular/platform-browser@2.0.0-rc.3 @angular/platform-browser-dynamic@2.0.0-rc.3 @angular/http@2.0.0-rc.3 @angular/core@2.0.0-rc.3 @angular/router@2.0.0-rc.2

like it says in the changelog, everything downloads fine. However, when I navigate to node_modules/ionic-angular/components I don’t see a ModalController component. So, it errors out when I try to build the code:

../node_modules/ionic-angular/index"' has no exported member 'ModalController'.

I even have gone as far as deleting my node modules and reinstalling them insuring that the package.json says beta.10 etc.


I’ve a similar problem, no clue what’s happening so far.


Ahh, you’re trying to use ModalController. That is not released yet. The docs point to the nightlies first, but you want to us the beta 10 version of the docs.


When I originally posted the question I was not using modal Controller, I was using the navController to “present” the modal. But in the navController present function it was falling into the [’_tabs’] if statement which just returns nothing as shown in the original post.