When navigating to other page keep showing the navtabs - angular6

Question

I am migrating my application from ionic 3 to ionic 4 and I am wondering how to keep showing the navtabs when navigating between pages. When I do this:
[routerLink]="'/offers/'" routerDirection="forward"
The tabs disappear, what do I have to do when I almost always want to show the navtabs?
Define the routes in tabs.router.module.ts or in the pages?
Hope somebody could help me out on this.

Answer 1

Something like this is doing it for me. So basically yes, define the routes in your router's routing module.
app.module.ts
import { NgModule } from '#angular/core';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
IonicModule.forRoot(),
AppRoutingModule,
],
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
],
bootstrap: [AppComponent],
})
export class AppModule {
}
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'start/tabs', pathMatch: 'full' },
{ path: 'start', loadChildren: './pages/tabs/tabs.module#TabsModule' },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {
}
tabs.module.ts
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { IonicModule } from '#ionic/angular';
import { PageAPageModule } from '../pageA/PageA.module';
import { PageBPageModule } from '../pageB/PageB.module';
import { TabsPage } from './tabs.page';
import { TabsPageRoutingModule } from './tabs.page-routing.module';
#NgModule({
imports: [
CommonModule,
IonicModule,
PageAPageModule,
PageBPageModule,
TabsPageRoutingModule,
],
declarations: [
TabsPage,
],
})
export class TabsModule {
}
tabs.page-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { PageAPage } from '../pageA/pageA.page';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'pageA',
children: [
{ path: '', component: PageAPage },
{ path: 'subPageA1', loadChildren: '../subPageA1/subPageA1.module#SubPageA1PageModule' },
{ path: 'subPageA2', loadChildren: '../subPageA2/subPageA2.module#SubPageA2PageModule' },
],
},
{
path: 'pageB',
children: [
{ path: '', loadChildren: '../pageB/pageB.module#PageBPageModule' },
{ path: ':id', loadChildren: '../pageB-detail/pageB-detail.module#PageBDetailModule' },
],
},
{
path: 'pageX',
...
},
{
path: '', redirectTo: '/start/tabs/pageA', pathMatch: 'full',
},
],
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class TabsPageRoutingModule {
}
tabs.page.html
<ion-tabs>
<ion-tab-bar color="dark" slot="bottom">
<ion-tab-button tab="pageA">
<ion-icon name="calendar"></ion-icon>
<ion-label>pageA</ion-label>
</ion-tab-button>
<ion-tab-button tab="pageB">
<ion-icon name="contacts"></ion-icon>
<ion-label>pageB</ion-label>
</ion-tab-button>
<ion-tab-button tab="pageX">
<ion-icon name="contacts"></ion-icon>
<ion-label>pageX</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
app.component.html
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item routerLink="/start/tabs/pageA">
<ion-icon slot="start" name="person"></ion-icon>
<ion-label>pageA</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item routerLink="/start/tabs/pageA/subPageA1">
<ion-icon slot="start" name="person"></ion-icon>
<ion-label>subPageA1</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item routerLink="/start/tabs/pageB">
<ion-icon slot="start" name="person"></ion-icon>
<ion-label>pageB</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item routerLink="/start/tabs/pageX">
<ion-icon slot="start" name="person"></ion-icon>
<ion-label>pageX</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>