Angular 16 - issues with routing to child routes

Issue

Angular 16 routing... I have child routes that are protected - these all work as expected. I also have child routes that are unprotected and all but one work correctly. The route "resetpassword" is always redirecting me to the login page and never routing to the resetpassword page.

Here is my route array:

const routes: Routes = [
  {
    path: '', component: SecureLayoutComponent, canMatch: [canMatchAuthenticated],
    children: [
      { path: '', component: PageDashboardComponent },
      { path: 'users', component: PageUsersComponent },
      { path: 'user', component: PageUserComponent },
      { path: 'companies', component: PageCompaniesComponent },
      { path: 'company', component: PageCompanyComponent },
      { path: 'professionals', component: PageProfessionalsComponent },
      { path: 'professional', component: PageProfessionalComponent },
      { path: 'member', component: PageProfessionalComponent },
      { path: 'landingreports', component: PageLandingReportsComponent },
      { path: 'landingreport', component: PageLandingReportComponent },
      { path: 'cohorts', component: PageCohortsComponent },
      { path: 'cohort', component: PageCohortComponent }
    ],
    runGuardsAndResolvers: 'always'
  },
  {
    path: '', component: LoggedOutLayoutComponent, canActivate: [canActivateUnauthenticated],
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: 'login', component: PageLoginComponent },
      { path: 'forgotpassword', component: PageForgotPasswordComponent },
      { path: 'resetpassword', component: PageResetPasswordComponent },
    ],
    runGuardsAndResolvers: 'always'
  }
];

The Authenticated Guard

const canMatchAuthenticated: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
  let b = inject(AuthService).isAuthenticated();
  return b;
}

The Unauthenticated guard

const canActivateUnauthenticated: CanActivateFn = (route: Route, state: RouterStateSnapshot) => {
  let b = !(inject(AuthService).isAuthenticated());
  return b;
}

Given a link such as: mydomain.com/resetpassword?token=<some-token> The application always ends up at the login screen. When I use the Alt+Back - it will go to the resetpassword screen. I have tried everything I can to get it to work and have looked for a couple of days for a solution. Can anyone help?

Edit Got rid of deprecated CanActivate derived classes. Switched to canMatch for the SecureLayoutComponent. Still does not work. Please help!

Solution

If I understand correctly, your goal is to skip the SecureLayoutComponent on route '' when AuthenticatedGuard returns false, and then proceed to show LoggedOutLayoutComponent on route '' if UnauthenticatedGuard returns true.

In that case, you should use the canMatch route guard on SecureLayoutComponent instead of canActivate. canMatch is the only guard that will skip the current route if the guard returns false and will proceed with other Route configurations. In contrast, canActivate will cancel the navigation if any guard returns false.

You can read more about it in the Angular documentation for canMatch and canActivate.

Answered By - Karel