I have a total of 15 pages within my project and I am looking to incorporate a page with 2 tabs. To make this happen, I have created a folder labeled tabs inside the existing app directory.
Inside the tabs folder, there are 3 specific pages - 1. project view 2. project tasks 3. project conversations
I followed the instructions in the documentation by adding 2 and 3 into the project view, but encountered an error:
Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'projectview/tab1'
Error: Cannot match any routes. URL Segment: 'projectview/tab1'
Below is the code snippet from projectview-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProjectviewPage } from './projectview.page';
const routes: Routes = [
{
path:'projectview',
component: ProjectviewPage,
children:[
{path: 'tab1',
//loadChildren:'./../projecttasks/projecttasks.module#ProjecttasksPageModule'
loadChildren: () => import('../projecttasks/projecttasks.module').then( m => m.ProjecttasksPageModule)
},
{path: 'tab2’,
//loadChildren:'./../projectconversations/projectconversations.module#ProjectconversationsPageModule'
loadChildren: () => import('../projectconversations/projectconversations.module').then( m => m.ProjectconversationsPageModule)
},
{
path: '',
redirectTo: '/projectview/tab1',
pathMatch: 'full”
}
]
},
{
path:'',
redirectTo:'/projectview/tab1',
pathMatch: 'full"
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ProjectviewPageRoutingModule {}
This is the content provided in projectview.page.html:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab One</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>Tab Two</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
The routes for the tab pages have also been commented out in app-routing.module.ts:
// {
// path: 'projecttasks',
// loadChildren: () => import('./tabs/projecttasks/projecttasks.module').then( m => m.ProjecttasksPageModule)
// },
// {
// path: 'projectconversations',
// loadChildren: () => import('./tabs/projectconversations/projectconversations.module').then( m => m.ProjectconversationsPageModule)
// }
It seems like something is missing, what could it be?
Edit 1
I even attempted using paths like this in pageview.module.ts, however, it did not resolve the issue either:
{path: 'tab1',
//loadChildren:'./../projecttasks/projecttasks.module#ProjecttasksPageModule'
loadChildren: () => import('../projecttasks/projecttasks.module').then( m => m.ProjecttasksPageModule)
},
{path: 'tab2',
//loadChildren:'./../projectconversations/projectconversations.module#ProjectconversationsPageModule'
loadChildren: () => import('../projectconversations/projectconversations.module').then( m => m.ProjectconversationsPageModule)
},