multiple layout routes protected by auth guard service is not working properly

Question

In My Angular App i Have three different layouts for three different users adminlayout for admin xyzlayout for company customerlayout for Customer

i have set up three different modules and routing modules for all above mentioned users and then imported each module in app main module respectively.Everything is working fine with admin and company roles but as soon as i login with customer role i face a weird issue after logging in i get routed to customer_dashboard which is fine but when i navigate the sidebar the system logs me out because the expected role doesn't match the current role which is implemented in my authguard service class.But as soon i remove my xyzlayout routes the customerlayout starts working fine

below given is my 1)app.routing.module.ts code 2)auth guard service file code 3)login component.ts code

const routes: Routes =[
{
path: '',
redirectTo:'/login',
pathMatch:'full',
},
{
path:'login',
component:LoginComponent,
canActivate:[LoginGuard]
},
{
path: '',
component: AdminLayoutComponent,
canActivate:[AuthGuardService],
data: { 
  expectedRole: 'Admin'
},
children: [
    {
  path: '',
  loadChildren: './layouts/admin-layout/admin- 
layout.module#AdminLayoutModule'
}]},
{
path:'',
component:CustomerLayoutComponent,
canActivate:[AuthGuardService],
data: { 
  expectedRole: 'Customer'
},
children:[
  {
    path:'',
    loadChildren:'./layouts/customer-layout/customer- 
   layout.module#CustomerLayoutModule'
  }
]
},
{
  path:'',
component:MobiLayoutComponent,
canActivate:[AuthGuardService],
data: { 
  expectedRole: 'Company'
},
children:[
  {
    path:'',
    loadChildren:'./layouts/mobi-layout/mobi-layout.module#MobiLayoutModule'
  }
]
},
//{ path:'**',redirectTo:'login',pathMatch:'full'}
];

@NgModule({
imports: [
CommonModule,
BrowserModule,
NgxUiLoaderModule.forRoot(ngxUiLoaderConfig),
RouterModule.forRoot(routes),
],
exports: [
],
})
export class AppRoutingModule { }

--------auth.guard.service.ts--------

export class AuthGuardService implements CanActivate {
constructor(public auth:AuthService,public router:Router) { 
}

canActivate(route:ActivatedRouteSnapshot):boolean{
const expectedRole = route.data.expectedRole;

const token = localStorage.getItem('token');
const tokenPayload = decode(token);
const user_role=tokenPayload['role'].toString();
console.log("User Role Is "+user_role);
console.log("Expected Role Is"+expectedRole);
if (
  !this.auth.isAuthenticated() || 
   user_role!== expectedRole
) {
  localStorage.removeItem('token');
  localStorage.removeItem('user');
  this.router.navigate(['login']);
  return false;
}
return true;
}

}

--------Login.ts.--------

 if(res['user'].role.toLowerCase()=='admin')
  {
  this.router.navigate(['/dashboard']);
  }
  else if(res['user'].role.toLowerCase()=='customer')
  {
   this.router.navigate(['/customer_dashboard']);
  }
  else if(res['user'].role.toLowerCase()=='company')
   {
   this.router.navigate(['/company_dashboard']);
   }