Ion-tabs is not showing

Ionic Framework ionic-v3
1

Hi, i’m having an issue displaying tabs inside my app, here is my code :

app.component.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = FooterPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, http:HttpClientProvider) {
    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();
      /*if(http.isAuthenticated()) {
        this.rootPage = HomePage;
      } else {
        this.rootPage = LoginPage;
      }*/
    });
  }
}

with the simplest html :

<ion-nav [root]="rootPage"></ion-nav>

Now my footer.ts :

Component({
  templateUrl: 'footer.html',
})
export class FooterPage {

  home : HomePage;

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

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

with the following template :

<ion-tabs>
  <ion-tab tabIcon="list" tabTitle="Games" [root]="home"></ion-tab>
</ion-tabs>

and my homepage is just displaying “Hello”

I’m having a white page either on the android emulator or chrome browser.
I tried the following solution : https://github.com/ionic-team/ionic/issues/7604 but didn’t work…

Am i doing something wrong? Here is my package.json

{
    "name": "ionicapp",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/http": "^4.1.0",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "cordova-android": "^6.2.3",
        "cordova-plugin-compat": "^1.0.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-file": "^4.3.3",
        "cordova-plugin-http": "^1.2.0",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.5.3",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.0.2",
        "@ionic/cli-plugin-cordova": "1.5.0",
        "@ionic/cli-plugin-ionic-angular": "1.4.0",
        "ionic": "3.6.0",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-http": {},
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android"
        ]
    }
}

Thanks for your help!

2

This makes me suspect you have a template syntax error somewhere. Look in the JavaScript console.

3

I don’t have any error in the console,
i figured out that the .tabbar css class has opacity: 0

If i edit the css in chrome console and set opacity:1 the tabs appear ! But nothing happen when i click on it

Can someone explain me why the tabbar opacity is set to 0 ?

EDIT:

Ok i am so stupid… i replaced

home : HomePage;

with

home = HomePage;

everything is working fine now!

6 Likes
6

haha, same for me, thanks !