I'm trying to create a tabs page layout for my ionic 4 app. After my configs and setup, I get the error Error: Cannot match any routes. URL Segment: 'tabs'
First of all, when I created a default starter using the tabs template, it doesn't work. The tab bar shows but it doesn't display the tab content. After days of research and testings, no luck yet. See what I currently have;
My Ionic Info
Ionic:
ionic (Ionic CLI) : 4.6.0 (C:\Users\Ken\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.17
@angular-devkit/build-angular : 0.10.7
@angular-devkit/schematics : 7.0.7
@angular/cli : 7.0.7
@ionic/angular-toolkit : 1.2.0
System:
NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomePageModule'
},
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
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: 'tab1',
outlet: 'tab1',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
},
{
path: 'tab2',
outlet: 'tab3',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
},
{
path: 'tab3',
outlet: 'tab3',
loadChildren: '../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/(one:one)'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
tabs.page.html
<ion-tabs>
<!-- Tabs -->
<ion-tab tab="tab1">
<ion-router-outlet name="tab1"></ion-router-outlet>
</ion-tab>
<ion-tab tab="tab2">
<ion-router-outlet name="tab2"></ion-router-outlet>
</ion-tab>
<ion-tab tab="tab3">
<ion-router-outlet name="tab3"></ion-router-outlet>
</ion-tab>
<!-- Tab Buttons -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1" href="/tabs/(tab1:tab1)">
<ion-icon name="navigate"></ion-icon>
<ion-label>tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2" href="/tabs/(tab2:tab2)">
<ion-icon name="person"></ion-icon>
<ion-label>tab2</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3" href="/tabs/(tab3:tab3)">
<ion-icon name="bookmarks"></ion-icon>
<ion-label>tab3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
I expected this to load the contents of tab1 by default when I navigate to /tabs and then clicking on the tab2 icon should likewise show the contents on tab2page etc.. but I get the error above when I do ionic serve and then add /tabs to the url. Any help here would be greatly appreciated. Thanks in anticipation.
in tabs.router.module.ts
remove the path:'tabs' under routes:Routes then the code will be like this. I am pasting the code from my file
const routes: Routes = [ {
path: '',
component: TabsPage,
children: [
{
path: 'tab1',
loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
},
{
path: 'tab2',
loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
},
{
path: 'tab3',
loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
] }, ];
in app-routing.module.ts the code will be like this
const routes: Routes = [ {
path: 'login',
loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule) }, {
path: 'tabs',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule) }, {
path : '',
redirectTo : 'login',
pathMatch : 'full' } ];
Replace these lines in tabs.router.module.ts
{
path: '',
redirectTo: '/tabs/tabs/(one:one)'
}
You have to add '/tabs' before final redirect.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With