Maybe not the best approach, but I want to use the same Angular path for both logged in and unauthenticated users to display a component. I have a skeleton component which contains the components after the user has logged in. If the user isnt logged in I dont want to display the skeleton component only the component itself.

routing:

{
    path: '',
    component: SkeletonComponent,
    canActivate: [AuthGuardService],
    children: [
      {
        path: 'dashboard',
        loadChildren: () =>
          import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
      },
      {
        path: 'opti-inspector',
        loadChildren: () =>
          import('./opti-inspector/opti-inspector.module').then(
            (m) => m.OptiInspectorModule
          ),
      },
      {
        path: '**',
        component: PageNotFoundComponent,
      },
    ],
  },

I want to introduce a protocol component, which is avaialable as both the child of the SkeletonComponent if the user is logged in, or a separate path if the user is not logged in. How could I achieve this?

Unsuccesful trial:

{
    path: '',
    component: SkeletonComponent,
    canActivate: [AuthGuardService],
    children: [
      {
        path: 'dashboard',
        loadChildren: () =>
          import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
      },
      {
        path: 'opti-inspector',
        loadChildren: () =>
          import('./opti-inspector/opti-inspector.module').then(
            (m) => m.OptiInspectorModule
          ),
      },
      {
        path: 'protocol',
        loadChildren: () =>
          import('./protocoll/protocoll.module').then((m) => m.ProtocollModule),
      },
      {
        path: '**',
        component: PageNotFoundComponent,
      },
    ],
  },
  {
    path: 'protocol',
    loadChildren: () =>
      import('./protocoll/protocoll.module').then((m) => m.ProtocollModule),
  },