Guard Children Routes

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

1. Define Routes with AuthGuard Applied to Specific Children

src/app/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),
        canActivate: [AuthGuard], // Applying AuthGuard only to this child route
      },
      ....
     ]
    }
  ....
  ]