Guard Children Routes

If you want to apply for an AuthGuard to specific child components in an Angular route configuration (while allowing other routes to be accessible without authentication), you can apply the canActivate (or canLoad) property at the child route level, rather than the parent route level. This way, the guard will protect only the specific child routes.

1. Define Routes with AuthGuard Applied to Specific Children

src/app-routing.module.ts

...

const routes: Routes = [
....
  {
    path: '',
    component: AdminLayout,  // Parent route
    children: [
      {
        path: 'dashboard', // Child route that requires authentication
        loadChildren: () => import('./demo/dashboard/dashboard.module').then((m) => m.DashboardModule),
        canActivateChild: [AuthGuardChild], // Applying AuthGuard only to this child route
      },
      ....
     ]
    }
  ....
  ]