Adding tabs to blank project wont work

Ionic Framework ionic-v3
1

Hi, iam trying to add tabs to blank project, but i cant get it to work. I did everything i should - generate tabspage, whith template :

<ion-tabs>
  <ion-tab [root]="shoppingListPage" tabTitle="Shopping List" tabIcon="book"></ion-tab>
  <ion-tab [root]="recipesPage" tabTitle="Recipes" tabIcon="book"></ion-tab>
</ion-tabs>

and ts file :

import { RecipesPage } from './../recipes/recipes';
import { ShoppingListPage } from './../shopping-list/shopping-list';
import { Component } from '@angular/core';


@Component({
 selector: 'page-tabs',
 templateUrl: 'tabs.html',
})
export class TabsPage {
 shoppingListPage:ShoppingListPage;
 recipesPage:RecipesPage;
}

Then i added it to app.component.ts as rootpage:

import { TabsPage } from './../pages/tabs/tabs';
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

but when i serve project, all i get is blank page, also, there arent any errors. Any ideas where is the problem? or is it some kind of bug?

1 Like
2

I have the exact same situation as yourself. Upon creating a new app using the template everything works fine.

3

Hi, @Vartex05

You need add “=” sign instead of “:” ,

export class TabsPage {
    shoppingListPage = ShoppingListPage;
    recipesPage = RecipesPage;
}

Thanks.