Cannot match any routes - Ionic 5 Angular project

Question

I have around 15 pages in my project, I want to have a page with 2 tabs in it. In order to achieve this I created a folder named tabs inside app.

This tab folder has 3 pages - 1. project view 2. projecttasks 3. projectconversations

I added 2 and 3 in project view as seen guided in docs, but I am getting error:

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'projectview/tab1'

Error: Cannot match any routes. URL Segment: 'projectview/tab1'

Below is projectview-routing.module.ts code

    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 {}

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>

I have also commented the routes of tabs pages from 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)
  // }

What am I missing ?

Edit 1

I even tried calling path like this in pageview.module.ts, but this did not work as well

 {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)
},

hehehe it worked, how did you thought of that ?? you can right this as answer and i'll accept it — user2828442
I found all your configurations were correct and realized you were wrong on setting up the path. — anonymous

anonymous anonymous · Accepted Answer · 2020-04-21T20:38:42

1

votes

Just remove the forward slash in the path

path:'',redirectTo:'projectview/tab1'

Cannot match any routes - Ionic 5 Angular project

Edit 1

1 Answers