Can not route to child in angular 7

Question

I have a lazy loaded module ManagerDashboard that has some children routes:

app-routing.module

export const routes: Routes = [

  { path: 'manager-dashboard', loadChildren: './pages/manager-dashboard/manager-dashboard.module#ManagerDashboardPageModule' },
];

manager-dashboard-routing.module

const managerRoutes: Routes = [
  {
    path: '',
    component: ManagerDashboardPage,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'consultations',
        component: ConsultationsPage,
      },
      {
        path: 'weigh-ins',
        component: VisitsPage,
        children: [
          {
            path: ":id",
            component: VisitPage
          }
        ]
      },
      {
        path: 'finance',
        component: ConsultationsPage
      },
      {
        path: '',
        redirectTo: 'consultations',
        pathMatch: 'full'
      }
    ]
  },
];

And in my VisitsPage I have links that should link out to the VisitPage but for some reason my view does not change after the URL changes (also there are no errors).

VisitsPage

this.router.navigate(['manager-dashboard', 'weigh-ins', client.check_in_id])

What am I missing?

Answer 1

You current code

{
  path: 'weigh-ins',
  component: VisitsPage,
  children: [
    {
      path: ":id",
      component: VisitPage
    }
  ]
}

Make it

{
  path: 'weigh-ins/:id'
  component: VisitsPage,
}