Navigate from Login page to Tabs in Ionic4? - ionic-framework

Question

I am creating an application and i want move from login Page to Tabs Page. When I try to navigate to Tabs page, its only showing Home page without Tabs.
here is my Code.
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
tabs.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { Routes, RouterModule } from '#angular/router';
import { IonicModule } from '#ionic/angular';
import { TabsPageRoutingModule } from './tabs.router.module';
import { TabsPage } from './tabs.page';
import { HomePageModule } from '../home/home.module';
import { ActivityPageModule } from '../activity/activity.module';
import { MygroupsPageModule } from '../mygroups/mygroups.module';
import { MessagesPageModule } from '../messages/messages.module';
import { SettingsPageModule } from '../settings/settings.module';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
TabsPageRoutingModule,
HomePageModule,
ActivityPageModule,
MygroupsPageModule,
MessagesPageModule,
SettingsPageModule
],
declarations: [TabsPage]
})
export class TabsPageModule {}
tabs.router.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { ActivityPage } from '../activity/activity.page';
import { MygroupsPage } from '../mygroups/mygroups.page';
import { MessagesPage } from '../messages/messages.page';
import { SettingsPage } from '../settings/settings.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full',
},
{
path: 'home',
outlet: 'home',
component: HomePage
},
{
path: 'activity',
outlet: 'activity',
component: ActivityPage
},
{
path: 'mygroups',
outlet: 'mygroups',
component: MygroupsPage
},
{
path: 'messages',
outlet: 'messages',
component: MessagesPage
},
{
path: 'settings',
outlet: 'settings',
component: SettingsPage
}
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
From Login page, I am navigating in this way.
this.router.navigate(['tabs']);
but this is just showing a home page with no tabs. Can you guide me what should i do, even tabs are not showing in DOM, i tried to inspect them.
It is just showing Home Page as default Page.

Answer 1

I had the same issue, the navigation doen't work in tabs' page. To avoid the issue I did this :
this.navCtrl.navigateRoot('/home'); // I use NavCtroller instead of Router
and in app-routing.module.ts :
{ path: 'home', redirectTo: '/tabs/(home:home)' },
I hope it will work properly in the next beta.