Ionic 3 Lazy Loading with tabs not working [SOLVED]


#1

My app set to lazy loading pages.
I have page for the tabs.

tabs.html

<ion-tabs>
  <ion-tab [root]="nearByPlacesPage" tabIcon="ios-home"></ion-tab>
  <ion-tab [root]="messagingPage" tabIcon="ios-chatbubbles"></ion-tab>
  <ion-tab [root]="activeBarChatPage" tabIcon="ios-chatbubbles"></ion-tab>
  <ion-tab [root]="notificationsPage" tabIcon="ios-notifications" [tabBadge]="sharedProvider.notificationsBadge"></ion-tab>
  <ion-tab [root]="settingsPage" tabIcon="ios-settings"></ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import {SharedProvider} from "../../providers/shared/shared";

@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {
  nearByPlacesPage: 'NearByPlacesPage';
  messagingPage: 'MessagingPage';
  activeBarChatPage: 'ActiveBarChatPage';
  notificationsPage: 'NotificationsPage';
  settingsPage: 'SettingsPage';

  constructor(public sharedProvider: SharedProvider) {
  }

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

}

in appComponent.ts
I set: rootPage = “TabsPage”

And when the app loaded i can see the log from tabsPage ionViewDidLoad() function but my screen is black,
And i don’t see that the first tab page is loaded.

Any help?
Thanks

SOLVED

change
tabs.html

<ion-tabs>
  <ion-tab root="NearByPlacesPage" tabIcon="ios-home"></ion-tab>
  <ion-tab root="MessagesPage" tabIcon="ios-mail" [tabBadge]="sharedProvider.messagesBadge"></ion-tab>
  <ion-tab root="ActiveBarChatPage" tabIcon="ios-chatbubbles"></ion-tab>
  <ion-tab root="NotificationsPage" tabIcon="ios-notifications" [tabBadge]="sharedProvider.notificationsBadge"></ion-tab>
  <ion-tab root="SettingsPage" tabIcon="ios-settings"></ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import {SharedProvider} from "../../providers/shared/shared";

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

  constructor(public sharedProvider: SharedProvider) {
  }

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

}