Ionic 4 tabs navigation pulls content to bottom - angular6

Question

I'm developping an Hybrid App with IONIC 4.
The first page is a login (left) the second the home once authenticated (right):
As you can see the content for each tab is hidden on the bottom and only the component header is shown.
Here is some code:
Home routes
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HomePage } from './home.page';
const routes: Routes = [
{
path: 'tabs',
component: HomePage,
children: [
{
path: 'newsfeed',
outlet: 'newsfeed',
loadChildren: '../news-feed/news-feed.module#NewsFeedPageModule'
},
{
path: 'sitters',
outlet: 'sitters',
loadChildren: '../sitters/sitters.module#SittersPageModule'
},
{
path: 'userprofile',
outlet: 'userprofile',
loadChildren: '../user-profile/user-profile.module#UserProfilePageModule'
}
]
},
{
path: '',
redirectTo: '/home/tabs/(newsfeed:newsfeed)'
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomePageRoutingModule { }
Homepage router outlet and tabs
<ion-tabs color="warning" useRouter="true">
<ion-tab label="Feed" icon="paw" href="/home/tabs/(newsfeed:newsfeed)">
<ion-router-outlet stack name="newsfeed"></ion-router-outlet>
</ion-tab>
<ion-tab label="Sitters" icon="people" href="/home/tabs/(sitters:sitters)">
<ion-router-outlet stack name="sitters"></ion-router-outlet>
</ion-tab>
<ion-tab label="Profile" icon="person" href="/home/tabs/(userprofile:userprofile)">
<ion-router-outlet stack name="userprofile"></ion-router-outlet>
</ion-tab>
</ion-tabs>
Each tab component has somethig like
<ion-header>
<ion-toolbar>
<ion-title>news-feed</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<p>Hello there.</p>
</ion-item>
</ion-list>
</ion-content>
But the content is always on the bottom. Any ideas? Thanks in advance warriors

Answer 1

I just encounter the same issue. And i spent almost 4 days trying to figure it out !
This is because of lazy loading. So you must do that :
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import NewsfeedPage from '../news-feed/news-feed.page';
import SittersPage from '../sitters/sitters.page';
import UserProfilePage from '../user-profile/user-profile.page';
import { HomePage } from './home.page';
const routes: Routes = [
{
path: 'tabs',
component: HomePage,
children: [
{
path: 'newsfeed',
outlet: 'newsfeed',
component: NewsFeedPage
},
{
path: 'sitters',
outlet: 'sitters',
component: SittersPage
},
{
path: 'userprofile',
outlet: 'userprofile',
loadChildren: UserProfilePage
}
]
},
{
path: '',
redirectTo: '/home/tabs/(newsfeed:newsfeed)'
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomePageRoutingModule { }
Don't forget to import the modules in your home.module.ts
Hope it will help.