Ionic 4 `rc.0` ion-tabs example with ion-router-outlet

Ionic Framework
1

I’m trying to migrate an ionic4 start app to rc.0 but I’m having problems with ion-tabs and ion-router-outlet. The docs seem out of date (see:Ionic 4 RC ion-tab is not known element on blank project)

can anyone offer any help?

// beta.16: TabsPageRoutingModule 
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'categories',
        outlet: 'home',
        component: CategoriesPage
      },
      {
        path: 'profile',
        outlet: 'profile',
        component: ProfilePage
      },
      {
        path: 'notifications',
        outlet: 'notifications',
        component: NotificationsPage,
        resolve: {
         data: NotificationsResolver,
       }
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:categories)',
    pathMatch: 'full'
  }
];

// template
<ion-tabs>
  <ion-tab tab="home-view"> // ion-tab was deprecated in beta.18
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>

with the breaking changes from beta.18 (see: https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#angular-tabs), I don’t know where to put

<ion-router-outlet name="home"></ion-router-outlet>

The tabs render correctly, but the actual view does not shows up because there is no where to put it. I can’t find an example.

// after beta.18: TabsPageRoutingModule
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'categories',
        outlet: 'home',
        children:[{
          path: '',
          loadChildren: '../categories/categories.module#CategoriesPageModule'
        }]
      },
      {
        path: 'profile',
        outlet: 'profile',
        children:[{
          path: '',
          loadChildren: '../profile/profile.module#ProfilePageModule'
        }]
      },
      {
        path: 'notifications',
        outlet: 'notifications',
        children:[{
          path: '',
          loadChildren: '../notifications/notifications.module#NotificationsPageModule'
        }],
        resolve: {
         data: NotificationsResolver,
       }
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:categories)',
    pathMatch: 'full'
  }
];


// template
<ion-tab-button tab="(home:categories)"> // routes correctly, but where does the content go?
    <ion-icon name="home"></ion-icon>
    <ion-label>Categories</ion-label>  
</ion-tab-button>
1 Like
2

The sub ion-router-outlet is not required anymore. I believe you need to remove your outlet: '...' definition in the routing module.

Take a look at this example app: https://github.com/ionic-team/ionic-conference-app/

3

Checkout https://github.com/ionic-team/ionic/tree/master/core/src/components/tabs#angular
And scroll down to Usage> Angular section for the updated code example

4

I can get it to work without <ion-router-outlet>, but does that mean the underlying angular <router-outlet> feature is no longer supported?