Ionic 2 Modal not showing

Question

I've followed the example given on Ionic2 modals and am not getting any errors but when I click the card that should initiate the modal nothing happens.

Here is the code for the modal itself:

@Component ({
    template: `
        <ion-card class='popover'>
            <ion-card-content>
                Hello
            </ion-card-content>
        </ion-card>
    `
})

export class AccModal {

    dumbData: number;
    constructor() {
         console.log("constructor");
         this.dumbData= 22;
    }
}

The page where my modal will be presented looks like this:

<ion-card (click)='presentModal()' class='custom-card'>
    <ion-card-header>
        Sched. Accuracy
    </ion-card-header>
    <ion-card-content>
        71%
    </ion-card-content>
</ion-card>

With the typescript like this:

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

The console.log in the presentModal is being registered but the one in the constructor of the modal is NOT. I'm at a loss on what to do because I'm not 100% sure whats going on?

UPDATE

When I debug into the nav.present (Nav Controller function) here is what I see:

if (rootNav['_tabs']) {
    // TODO: must have until this goes in
    // https://github.com/angular/angular/issues/5481
    void 0;
    return;
}

My project does have tabs in it so that statement evaluates to true and the present function effectively returns me a 0 and calls it good. In my package.json my ionic versions are: "ionic-angular": "^2.0.0-beta.8", "ionic-native": "^1.1.0"

Hopefully this added information helps diagnose for someone smarter than myself.

UPDATE 2:

I've updated to the latest ionic 2 release in 2.0.0-beta.9. However, when I debug in the chrome console I still see the code above in my nav.present function in the ionic-angular code, EVEN THOUGH when I look at it in my own code I see this:

if (rootNav['_tabs']) {
  // TODO: must have until this goes in
  // https://github.com/angular/angular/issues/5481
  console.error('A parent <ion-nav> is required for ActionSheet/Alert/Modal/Loading');
  return;
}

I've cleared my cache and hard reloaded the page and still the old code shows up. I must be losing my mind. Any insight on this would be amazing.

Update 3

Here is the code for my tabs. The live in the app.html and the index variable is just a way to start the app on the right tab. It starts as 1(or the second tab):

<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>
</ion-tabs>

Answer 1

I know nothing about the code that handles the tabs, but I created a Plunker with the code in this post (and a pretty small change), and the modal shows up properly.

The change I made, is in the modal code:

// Add NavParams to use it later in the modal's constructor
import { ..., NavParams } from 'ionic-angular';

@Component ({
    template: `
        <ion-card class='popover'>
            <ion-card-content>
                Hello
            </ion-card-content>
        </ion-card>
    `
})
export class AccModal {

  private dumbData: number;

  // I've added the params variable, because you're calling this constructor
  // with a parameter (called 'param' and with the 'something' value)
  constructor(private params: NavParams) {

   console.log("constructor");
   this.dumbData= 22;

   // You can see in the console the parameter being printed properly
   console.log('Param:', params.get('param'));
 }

}

You can play around with this plunker (Ionic2 beta.9).

====================================

UPDATE:

I've updated the plunker to include a tab layout, and it works as expected.

The live in the app.html...

I tried to make it work including the tabs in the app.html but couldn't do it. So, I've added the tabs in a home page which only contains both tabs, and in the app.ts I just set this.rootPage = HomePage; so that is the first page of the application. Could you try doing this in your app, to see if including the tabs in the app page could be realted to the issue?

Answer 2

In the ionic 2 beta 11, the update fixed the issue. The only difference in my code from the example here on ionic's site is the template for my modal. Super simple, and straightforward on how it's done.