Apply router guard to all children except one

Question

Currently, in Angular, you can restrict access to all child routes by applying a router guard to one of the parents:

export const routes: Routes = [
  {
    path: 'my-account',
    canActivate: [IsUserLoggedIn],
    children: [{
      path: 'settings',
      component: SettingsComponent
    }, {
      path: 'edit-profile',
      component; EditProfileComponent
    }]
  }
];

This is useful to avoid having to repeat the canActivate guard in each route. But now what happens when I want to introduce a third route under my-account that should be publicly accessible? For example, maybe there's a publicly-accessible Help page at my-account/help that everyone should be able to access, even when they aren't logged in:

}, {
  path: 'help',
  component: HelpComponent,
  // Somehow make exception to canActivate guard above
}, {

Is there a clean way to do this, or is the only way to disrupt the organization of routes and apply the router guard to each child route manually, except the Help page?

Answer 1

I personally think if the HelpComponent route doesn't need to be protected, it will need to be in different parent route. So, it's the matter of organizing the routes.

But, in any case, you could also create a separate route for it, such as:

export const routes: Routes = [
  {
    path: 'my-account',
    canActivate: [IsUserLoggedIn],
    children: [{
      path: 'settings',
      component: SettingsComponent
    }, {
      path: 'edit-profile',
      component: EditProfileComponent
    }]
  },
  {
    path: 'my-account/help',
    component: HelpComponent
  }
];