Angular define route params from root

Question

I want to make a route path from base url:

my-domain.com/3

It was not working with path: ':id' and the page will be stuck:

  export const routes: Route[] = [


{
    path: '',
    component: LayoutComponent,
    canActivate: [IsAuthenticated],
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
      {
        path: 'dashboard',
        loadChildren: () => import('../pages/dashboard/dashboard.module').then(m => m.DashboardModule)
      },
      {
        path: 'companys',
        loadChildren: () =>
          import('../pages/company/feature/company-shell/company-shell.module').then(m => m.CompanyShellModule)
      },
      {
        path: ':id',
        children: [
          {
            path: 'users',
            loadChildren: () =>
              import('../pages/users/feature/users-shell/users-shell.module').then(m => m.UsersShellModule)
          },
          {
            path: 'shift',
            loadChildren: () =>
              import('../pages/shift/feature/shift-shell/shift-shell.module').then(m => m.ShiftShellModule)
          }
        ]
      }
    ]
  },
  {
    path: 'auth',
    canActivate: [IsNotAuthenticated],
    loadChildren: () => import('../auth/feature/auth-shell/auth-shell.module').then(m => m.AuthShellModule)
  },
  { path: '**', redirectTo: '/' }
]

It was working if I put a routing name before:id but I want to know if it is possible to define it just with ':id':

  {
        path: 'client/:id',
        children: [
          {
            path: 'users',
            loadChildren: () =>
              import('../pages/users/feature/users-shell/users-shell.module').then(m => m.UsersShellModule)
          },
...
}

Now working with my-domain.com/client/3 instead of my-domain.com/3

Answer 1

you should to set '' path for dashboard component. try this:

  { 
    path: '', 
    loadChildren: () => import('../pages/dashboard/dashboard.module').then(m => m.DashboardModule) 
  },
  { 
    path: ':id',
    loadChildren: () => import('../pages/dashboard/dashboard.module').then(m => m.DashboardModule)
  }