ionic 3, lazy-loading tabs components

Question

I\'m trying to create a ionic 3 tabs app with lazy loading without importing the components .

in my app.component.ts

 rootPage:string = \"Tabs\";


        

Answer 1

Check here.

<ion-tab [root]="Favorites" tabTitle="fav" tabIcon="star"></ion-tab>
<ion-tab [root]="libaray" tabTitle="Library" tabIcon="book"></ion-tab>

Here libaray and Favorites need to be variables of the component.

In your component try setting string equivalent of the ionic page to the variables in Tabs.ts:

export class Tabs{
 Favorites:any='Favorites';
 libaray:any = 'libaray'; //assuming you tried to give the page class name to `root`.
}

Note: Be sure not to import your lazy loaded pages anywhere other than within the page module.

Answer 2

Ensure at Tabs.html you include [root]="FavoritesRoot" as indicated below

<ion-tabs>
<ion-tab [root]="FavoritesRoot" tabTitle="fav" tabIcon="star"></ion-tab>
<ion-tab [root]="libarayRoot" tabTitle="Library" tabIcon="book"></ion-tab>
</ion-tabs>