CanDeactivate Route Guard Shows the selected route as active even when clicked on the cancel button

Question

I am new to Angular and I also searched for the issue on the internet and could not find a solution. Can anyone please help me? This is so important for me.

I have implemented a can deactivate route guard which triggers when we navigate to some other menu when the form is dirty.

The problem is when I am on client menu and makes the form dirty and navigate to the activation menu, a pop up appears which takes my confirmation to leave the page (works as expected). But when I click on the cancel button (wants to stay on the form page (client)) it anyhow keeps me on the page but however, the activation tabs show that it is active.

@Injectable()
export class CanDeactivateGuard implements CanDeactivate < CanComponentDeactivate > {
  canDeactivate(
    component: CanComponentDeactivate, 
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot
  ): Observable < boolean > | Promise < boolean > | boolean {
    const url: string = currentState.url;
    console.log('currentState: ' + currentState + '\n component.canDeactivate' + component.canDeactivate);
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

canDeactivate Method In Component

canDeactivate(): Observable < boolean > | boolean {
  if (this.clientForm.dirty) {
    return this.dialogService.confirm('Do you want to Discard changes?');
  }
  return true;
}

routing.ts

{
  path: 'configuration',
  component: AdminstratorComponent,
  children: [{
      path: 'client',
      component: ClientComponent,
      outlet: 'configuration',
      canDeactivate: [CanDeactivateGuard]
    },
    {
      path: 'activation',
      component: ActivationComponent,
      outlet: 'configuration',
      canDeactivate: [CanDeactivateGuard]
    }
  ]
}