Ionic 4 navigate to tabs - ionic4

Question

I'm working on an Ionic 4 project, I've generated a tabs project.
What I want to do is create a Login page which is the default page.
When a user has signed in successfully I want to navigate to the tabs.
When I'm trying to do this I get the error:
Error: Cannot match any routes. URL Segment: 'tabs'
These are my routes:
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'Login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
In my Login Page I have a button as follows:
<ion-button expand="block" [href]="'tabs'" color="light" fill="outline">Sign in</ion-button>
When I generate a different page I am able to navigate to this page using the same way.

Answer 1

I was facing the same issue. I found a solution here. You need to add an additional route to your routes array.
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'Login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
];

Answer 2

Step 1 : Add an additional route to tabs page in your app-routing.module.ts
{ path: 'app', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }
Step 2 : Add the tabs route inside the tabs-routing.module.ts
const routes: Routes =[
{
path:'tabs',
component:TabsPage,
children:[
{
path : 'home',
outlet : 'home',
component : HomePage
},
{
path : 'me',
outlet : 'me',
component : MePage
}
]
}
];
Step 3 : Link to the tabs page
<ion-button href="app/tabs/(home:home)" routerDirection='root'>Tabs</ion-button>

Answer 3

I faced the same issue. My first page is 'Sign In' page by default. I wanted to navigate to tabs module after button click.
app-routing.module.ts:
import { NgModule } from '#angular/core';
import { PreloadAllModules, RouterModule, Routes } from '#angular/router';
const routes: Routes = [
{ path: 'app', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: '', loadChildren: './sign-in/sign-in.module#SignInPageModule' },
{ path: 'search', loadChildren: './search/search.module#SearchPageModule' }
];
#NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
tabs.router.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'home',
children: [
{
path: '',
loadChildren: '../home/home.module#HomePageModule'
}
]
},
{
path: 'my-requests',
children: [
{
path: '',
loadChildren: '../my-requests/my-requests.module#MyRequestPageModule'
}
]
},
{
path: 'add-request',
children: [
{
path: '',
loadChildren: '../add-request/add-request.module#AddRequestPageModule'
}
]
},
{
path: 'search',
children: [
{
path: '',
loadChildren: '../search/search.module#SearchPageModule'
}
]
},
{
path: 'profile',
children: [
{
path: '',
loadChildren: '../profile/profile.module#ProfilePageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
];
#NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
sign-in.module.ts:
....
const routes: Routes = [
{
path: "",
component: SignInPage
}
];
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [SignInPage]
})
....
sign-in.page.html:
<ion-button (click)="navigateToProfile()">Sign In</ion-button>
sign-in.page.ts:
navigateToProfile(){
this.navController.navigateRoot(`app/tabs/home`);
}
Overall, my solution was:
adding one more path: 'app' in my root module app-routing.module
navigating to root with route with NavController. See here for more details, I found it here.