Problem with routing in Ionic 4

Ionic Framework
1

prosper
prosper.PNG522×558 18.2 KB
prosper2
prosper2.PNG817×200 14 KB

How do i solve this problem?

2

The route ( tabs3 ) that you are trying to load is does not exist. make sure that you load right route.

3

how do i go about that please?

4

Check whether you added it in HTML file.
Sometimes we are not adding names in HMTL file and then trying to access them.

5

i do not understand. can i share my codes with you so you can view the error and correct them please?

6

I do it below way and its working for me

in .html

 <ion-content  padding>
    <ion-tabs>
        <ion-tab-bar slot="bottom">
            <ion-tab-button tab="tab1">
                <ion-icon name="document"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="tab2">
                <ion-icon name="document"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="tab3">
                <ion-icon name="document"></ion-icon>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>

in app-routing.module.ts

{ path: 'tabs/:id', component: ParentComponent,children:
  
    [
      {
        path: 'tab1',
        component: Component1,
      },
      {
        path: 'tab2',
        component: Component2,
      },
      {
        path: 'tab3',
        component: Component3,
       
      },
        {
        path: '',
        redirectTo: 'tabs/tab1',
        pathMatch: 'full'
      }
    ]
},

Try this way and let me know if it works.

Thanks

7

nothing seem to work. please i need help. its so urgent.

8

in my tabs.router.module.ts, i have the following codes

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: ‘…/tab1/tab1.module#Tab1PageModule’
}
]
},
{
path: ‘list’,
children: [
{
path: ‘’,
loadChildren: ‘…/tab2/tab2.module#Tab2PageModule’,
}
]
},
{
path: ‘profile’,
children: [
{
path: ‘’,
loadChildren: ‘…/tab3/tab3.module#Tab3PageModule’
}
]
},
{
path: ’ profile/:id’,
children: [
{
path:’’,
loadChildren: ‘…/tab3/tab3.module#Tab3PageModule’
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/home’,
pathMatch: ‘full’
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/home’,
pathMatch: ‘full’
}
];

@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}

I dont know if this is wrong.

9

I think problem is about routing.
One work around is create new fresh project with tabs using Ionic Cli
and then check routing configuration.
Also I doubt about this
in your code

{
path: ’ profile/:id’,
children: [
{
path:’’,
loadChildren: ‘…/tab3/tab3.module#Tab3PageModule’
}

As much I understood that to move on profile detail page you are using profile?:id path.
But I think profile detail should implement on different page and not in tabs.

so final solutions

1.Create fresh project with tabs using ionic cli and compare what you are doing wrong in your project
2.Check routing in your project it may possible you declare something but that doesn’t exist

Thanks

10

or do you think the version of ionic cli also matters? because i am using ionic version 5.2.2
should i downgrade it back to version 4?

11

Ok try to downgrade and then try it.

12 
    {
        path: "profile",
        children: [
          {
            path: "",
            loadChildren: "./../profile/profile.module#ProfilePageModule"
          },
          {
            path: "profile-detail/:id",
            loadChildren: "./../profile/detail.module#ProfileDetailPageModule"
          }
        ]
      },
1 Like
13

Hi Aaron! do you mind if i can share my codes with you? probably i will get a solution to this error.