Ionic 2 modals breaking in a tabs layout

Ionic Framework ionic-v3
1

My application is hosted in a tab style format, with the app.html being as such:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Progress"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Workouts"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Create"></ion-tab>
</ion-tabs>

the page I am most concerned about is page 3, which is the creation tab. The code for the “controller” is as such:

import {Page, Modal, NavController} from 'ionic/ionic';
import {WorkoutService} from './../../services/workoutService';
import {ExerciseModal} from './exercise/exerciseModal';


@Page({
  templateUrl: 'build/pages/page3/page3.html',
  providers: [WorkoutService]
})
export class Page3 {

  constructor(workoutStore: WorkoutService, nav: NavController) {
    ...
    this.nav = nav;
  }

  addExercise() {
    ...
    let modal = Modal.create(ExerciseModal);
    this.nav.present(modal);
  }
}

The error I am receiving is as such:

Is there any reason as to why this is happening? I am not sure where rootNav is declared or why getActive is not a function of it. If anyone knows why this is happening please let me know.

Thanks.

2

bumping for visibility!

3

There is an issue in the starter for tabs. It does not have a ion-nav element: https://github.com/driftyco/ionic2/issues/877

It was fixed for the js version, however it looks like you are using the typescript version (which you can find under branches). However the Pull Request was not accepted yet.

Essentailly you want to make another page for the tabs pull out the html thats in app.html into there and make a controller that imports your pages.

Then in app.html add <ion-nav id=“nav” [root]=“root” #content> and in app.ts import the TabPage and set it as root.

4

Thank you for your help! I will try that!