Ionic tabs will not go to next page

Question

I have a ionic app project with tabs on the bottom and I'm trying to make a new tab to link to a new page that I made and when I do the correct code it does not go to the page after pressing on the newly made tab button ive contact ionic support and they said it looks right but they can't help me further

Heres my ionic tabs code

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

import { FormsPage } from 'forms.page'

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'parties',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: 'forms',
    children: [
      {
        path: '',
        loadChildren: '../forms/forms.module#FormsPageModule'
      }
    ]

  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
  
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="parties">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="forms">
  <ion-icon name="clipboard"></ion-icon>
    <ion-label>Forms</ion-label>
</ion-tab-button>

</ion-tab-bar>

</ion-tabs>

PSingh PSingh · Accepted Answer · 2019-06-28T22:09:05

Try with this configuration.

  const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: '../tab1/tab1.module#Tab1PageModule'
      },
      {
        path: 'parties',
        loadChildren: '../tab2/tab2.module#Tab2PageModule'
      },
      {
        path: 'tab3',
        loadChildren: '../tab3/tab3.module#Tab3PageModule'
      }
    ]
  },
  {
    path: 'forms',
    children: [
      {
        path: '',
        loadChildren: '../forms/forms.module#FormsPageModule'
      }
    ]

  },
  {
    path: '',
    redirectTo: '/tabs/tab1'
  }

];

And in all childrens make sure to have this routing:

  const routes: Routes = [
  {
    path: '',
    component: Tab1Page
  }
];

This for every childern page in your tabs.

Ionic tabs will not go to next page

1 Answers