Ionic3 Tabs doesn't work with lazy loading

Question

after read official documentation here and after spent a lot of times, my code doesn't load tabs with ionic tabs and lazy loading.

Here is it my .ts file

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-name',
  templateUrl: 'name.html',
})
export class NamePage {

  tab1: "Tab1Page";
  tab2: "Tab2Page";
  tab3: "Tab3Page";

  constructor(public navCtrl: NavController, public navParams: NavParams) { }

  ionViewDidLoad() { }

}

And here is it my .html file

<ion-content>

     <ion-tabs>
        <ion-tab [root]="tab1" tabIcon="reorder"></ion-tab>
        <ion-tab [root]="tab2" tabIcon="pin"></ion-tab>
        <ion-tab [root]="tab3" tabIcon="search"></ion-tab>
      </ion-tabs>

  </ion-content>

Here is it also my app.component.ts:

  rootPage:any = 'NamePage';

After compile code, the page is white page with hidden components. For view tabs i put this code:

.tabbar {
    opacity: 1;
}

but the buttons still no work; after click on a single button nothing is changing (the white screen remain).

I put also console log

ionViewDidLoad() {
    console.log('ionViewDidLoad NamePage');
}

The only thing present in the console is this one.

can someone give me a suggestion?

Answer 1

Try this:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from ....
@IonicPage()
@Component({
  selector: 'page-name',
  templateUrl: 'name.html',
})
export class NamePage {

 tab1: any;
 tab2: any;
 tab3: any;

constructor(public navCtrl: NavController, public navParams: NavParams) {
  this.tab1 = HomePage
......(other pages)
}

ionViewDidLoad() { }

}