Navigating nested routes (solved)

Ionic Framework Ionic Angular
1

Hi

I have a tab application with a toolbar at the bottom and a list inside a tab:
App

Navigation is controlled by a router you can see the routes below.

app-routing.module -> loads -> tabs-routing.module -> loads -> protocols-routing.module -> loads -> p-gisha-clalit-routing.module && p-dom-lev-mevigarim-routing.module

Selecting a list item should load a page in the tab area.

while the tab buttons works perfectly, when I click the list items I do not get any response. If I click the second list item which points to routerLink="/tabs/medsequipment" the app loads the correct page. But, when I click the top list item which has routerLink=โ€œp-gisha-clalitโ€ the app does nothing. It mite be loading some default page but the visual effect is a click animation with no reaction.

I suppose the route is broken in some place but I cant find the problem in that route.

Ill appreciate any incites.

Thanks

Erez

---------------- app code below ------

App routing:

RoutesMap
RoutesMap717ร—192 12.7 KB

tabs-routing.module:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'protocols',
        loadChildren: '../protocols/protocols.module#ProtocolsPageModule'
      },
      {
        path: 'medsequipment',
        loadChildren: '../medsequipment/medsequipment.module#MedsequipmentPageModule'
      },
      {
        path: 'gentables',
        loadChildren: '../gentables/gentables.module#GentablesPageModule'
      },
      {
        path: 'directive',
        loadChildren: '../directive/directive.module#DirectivePageModule'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'tabs/protocols'
  }
];

protocols-routing.module:

const routes: Routes = [
  {
    path: '',
    component: ProtocolsPage,
    children: [
      {
        path: 'p-gisha-clalit',
        loadChildren: '../protocolsPages/p-gisha-clalit/p-gisha-clalit.module#PGishaClalitPageModule'
      },
      {
        path: 'p-dom-lev-mevigarim',
        loadChildren: '../protocolsPages/p-dom-lev-mevigarim/p-dom-lev-mevigarim.module#PDomLevMevigarimPageModule'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'tabs/protocols'
  }
];

p-gisha-clalit-routing.module && p-dom-lev-mevigarim-routing.module
are very similar. p-gisha-clalit-routing.module is:

const routes: Routes = [
  {
    path: '',
    component: PGishaClalitPage
  }
];

The list in protocols is:

<ion-content>
  <ion-list>
    <ion-item class="HEBListItem" detail ="false" routerLink="p-gisha-clalit">
      <ion-label>ื’ื™ืฉื” ื›ืœืœื™ืช ืœืžื˜ื•ืคืœ</ion-label>
      <ion-icon name="caret-back-outline" item-right></ion-icon>
    </ion-item>
    <ion-item class="HEBListItem" detail ="false" routerLink="/tabs/medsequipment">
      <ion-label>ื“ื•ื ืœื‘ ื‘ืžื‘ื•ื’ืจ</ion-label>
      <ion-icon name="caret-back-outline" item-right></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>
2

Problem fixed by changing the protocols-routing.module to:

const routes: Routes = [
  {
    path: '',
    component: ProtocolsPage,
  },
  {
    path: 'p-gisha-clalit',
    loadChildren: '../protocolsPages/p-gisha-clalit/p-gisha-clalit.module#PGishaClalitPageModule'
  },
  {
    path: 'p-dom-lev-mevigarim',
    loadChildren: '../protocolsPages/p-dom-lev-mevigarim/p-dom-lev-mevigarim.module#PDomLevMevigarimPageModule'
  }
];
2 Likes
3

it solved my issue, But why children array not working?