CODEWITHSUNDEEP
ionic-frameworktabsangular6ionic4
Tal Hindi
Tal Hindi

Reputation: 245

Ionic 4 Tabs not rendering completely

I'm having this weird problem, I have started a new app with Tabs and angular routing. I have added a new Login page, and after login, the user is redirected to the tabs page. The problem is that after the redirect, sometimes only one tab is rendered, and sometimes two tabs are rendered. If I refresh the page or go directly to it, all 3 tabs are shown. If I start the app on the Tabs page, again, all 3 tabs are shown.

AppRoutingModule:

const routes: Routes = [
{path: 'login', loadChildren: './login/login.module#LoginPageModule'},
{path: 'home', loadChildren: './tabs/tabs.module#TabsPageModule'},
{path: '', redirectTo: '/login', pathMatch: 'full'}];

TabsPageRoutingModule:

const routes: Routes = [
{
    path: '',
    component: TabsPage,
    children: [
        {
            path: 'home',
            outlet: 'home',
            component: HomePage
        },
        {
            path: 'about',
            outlet: 'about',
            component: AboutPage
        },
        {
            path: 'contact',
            outlet: 'contact',
            component: ContactPage
        }
    ]
},
{
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
}];

LoginPage:

export class LoginPage implements OnInit {
responseData: any;
userData = {'email': '', 'password': ''};
constructor(public navCtrl: NavController, public apiService: ApiService, public toastCtrl: ToastController) {
}
login() {
    this.apiService.login(this.userData).then((result) => {
        this.responseData = result;
        if (this.responseData.token) {
            console.log(this.responseData);
            localStorage.setItem('token', this.responseData.token);
            this.navCtrl.goRoot('/home');
        } else {
            console.log('User already exists');
        }
    }, (err) => {
        // Error log
        console.log(err);
    });
}
ngOnInit() {

}}

Any Ideas? Thanks!

Upvotes: 1

Views: 3811

Answers (4)

4umfreak
4umfreak

Reputation: 111

As of today, November 1, 2018 the tabs in Ionic 4 (4.0.0-beta.15) have been completely changed.

https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#400-beta15-2018-11-01

Basically, they've updated the tabs to be a tab-bar of buttons that can be used to load ion-router-outlet, ion-content or ion-nav components.

Some other benefits of this refactor include:

  • Can now be written as a standalone Tab Bar (with no attached Tab)
  • Works with a navigation component or a plain content element
  • Works with shadow DOM and allows easy customization of the Tab Bar
  • Gives full control over the elements inside of the Tab Bar
  • Integrates nicely with other frameworks that have different ways of rendering element nodes

Upvotes: 2

Luis Felipe Diaz Valbuena
Luis Felipe Diaz Valbuena

Reputation: 641

I had the same problem.

After reviewing my HTML I realized that I had a problem, in the "ion-tab" the input "label" its empty and this caused the problem, the error:

<ion-tab label="" icon="medkit" href="/(entidades:entidades)">
 <ion-router-outlet name="entidades">
 </ion-router-outlet>
</ion-tab>

the solution for me:

<ion-tab label="The label of tab" icon="medkit" href="/(entidades:entidades)">
 <ion-router-outlet name="entidades">
 </ion-router-outlet>
</ion-tab>

I hope it helps you

Upvotes: 0

Paul
Paul

Reputation: 1

step 1: 

const routes: Routes = [
{
    path: 'tabs',
    component: TabsPage,
    children: [
        {
            path: 'home',
            outlet: 'home',
            component: HomePage
        },
        {
            path: 'about',
            outlet: 'about',
            component: AboutPage
        },
        {
            path: 'contact',
            outlet: 'contact',
            component: ContactPage
        }
    ]
},
{
    path: '',
    redirectTo: '/home/tabs/(home:home)',
    pathMatch: 'full'
}];

step 2:

this.navCtrl.goRoot('/home');

Upvotes: 0

Troy Thompson II
Troy Thompson II

Reputation: 431

Try changing

this.navCtrl.goRoot('/home');

to 

this.navCtrl.goRoot('/tabs'); to

Upvotes: 0

Related Questions