[ionic-v4] How work with router angular with tabs

Ionic Framework ionic-v3
1

I am migrating my app from v3 to v4, and I have a problem.

Here my tabs.component.html

<ion-tabs>
  <ion-tab icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab icon="card" href="/tabs/(offers:offers)">
    <ion-router-outlet name="offers"></ion-router-outlet>
  </ion-tab>
  <ion-tab icon="heart" badge="{{$numItemsInWishList > 0 ? $numItemsInWishList : '' }}"
           href="/tabs/(wishlist:wishlist)" badgeColor="dark">
    <ion-router-outlet name="wishlist"></ion-router-outlet>
  </ion-tab>
  <ion-tab icon="basket" badge="{{$numItemsInCart > 0 ? $numItemsInCart : '' }}" 
           href="/tabs/(cart:cart)" badgeColor="dark">
    <ion-router-outlet name="cart"></ion-router-outlet>
  </ion-tab>
  <ion-tab icon="contact" href="/tabs/(profile:profile)">
    <ion-router-outlet name="profile"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Here my tabs.module-routing.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsComponent,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomeComponent
      },
      {
        path: 'offers',
        outlet: 'offers',
        component: OffersComponent
      },
      {
        path: 'wishlist',
        outlet: 'wishlist',
        component: WishlistComponent
      },
      {
        path: 'cart',
        outlet: 'cart',
        component: CartComponent
      },
      {
        path: 'profile',
        outlet: 'profile',
        component: ProfileComponent
      }
    ]
  }
];

My app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    loadChildren: './tabs/tabs.module#TabsComponentModule',
    canActivate: [LoginGuard]
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'withoutconnection',
    component: WithoutConnectionComponent
  }
];

And for example ,my home-routing.module.ts

const routes: Routes = [
    {
        path: 'home',
        component: HomeComponent,
        children: [
            {
                path: 'category',
                component: CategoryComponent
            },
            {
                path: 'contactus',
                component: ContactUsComponent
            },
            {
                path: 'filter',
                component: FilterComponent
            },
            {
                path: 'map',
                component: MapComponent
            },
            {
                path: 'news',
                component: NewsComponent
            },
            {
                path: 'productdetails',
                component: ProductDetailsComponent
            },
            {
                path: 'productlist',
                component: ProductListComponent
            }
        ]
    }
    
];

Here my project scafolding…

--src/app
	+tabs
		--tabs.component.ts
		--tabs.routing-module.ts
	+home
		+components
			--category.component.ts
			--contactus.component.ts
				...
		--home.component.ts
		--home.routing-module.ts
	--app-routing.module.ts

If I want to route first to Home, and then I want to go to home/category but with this config it does like a push in ionic 3, loosing my tabs component, I want to push a new page with router angular but on the main selected tab.

How can I do it?

2

Nobody can help me? I have tried a lot of configurations without luck…