Angular router.navigate not working for child routes in canActivate()

Question

I have 2 child modules in my application in which i have used lazy loading. In canActivate Guard() i have set a condition that if the child module has products then navigate to the home page else navigate to the shop page.

But the below conditions don't works

canActivate(route: ActivatedRouteSnapshot) {
    const authToken = this.authService.authToken();
    const role = this.authService.role();
    this.products = this.homeService.getUserProducts();
    this.path = this.isProductsAvailable() ? '/home' : '/shop';

    if (!isEmpty(authToken)) {
      if (route.data.roles && route.data.roles.indexOf(role) === -1) {
        role === ROLE.Admin
          ? this.ngZone.run(() => this.router.navigate(['/dashboard']))
          : this.ngZone.run(() => this.router.navigate([this.path], {relativeTo: this.route}));
        return false;
      }
      return true;
    }
    this.ngZone.run(() => this.router.navigate(['/login']));
    return false;
  }

  isProductsAvailable(): boolean {
    const discount = size(this.products.discounts);
    const recentOrders = size(this.products.recent_orders);
    const specificDiscount = size(this.products.specific_discounts);

    return size(compact([discount, recentOrders, specificDiscount])) > 1;
  }

App.routing.ts

export const routes: Routes = [
    {
      path: '',
      redirectTo: 'landing',
      pathMatch: 'full',
    },
    {
      path: 'landing',
      component: LandingComponent,
      canActivate: [LandingGuard],
      data: {
        title: 'Landing',
      },
    },
    {
      path: '',
      data: {
        title: 'Auth',
      },
      loadChildren: () => import('./views/public/auth/auth.module').then((m) => m.AuthModule),
    },
    {
      path: '',
      data: {
        title: 'Users',
      },
      canActivate: [AuthGuard],
      loadChildren: () => import('./views/secure/users/users.module').then((m) => m.UsersModule),
    },
    {
      path: '',
      data: {
        title: 'Admin',
      },
      canActivate: [AuthGuard],
      loadChildren: () => import('./views/secure/admin/admin.module').then((m) => m.AdminModule),
    },
    { path: '**', component: P404Component },
  ];

User.routing.ts

import { OrdersComponent } from './orders/orders.component';
import { ShopComponent } from './shop/shop.component';
import { HomeComponent } from './home/home.component';
import { StepperComponent } from './cart/stepper/stepper.component';
import { ROLE } from '@shared/constants/constants';
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { SecureLayoutComponent } from '@secure/containers';
import { AuthGuard } from '@shared/helpers/guards/auth.guard';

const routes: Routes = [
  {
    path: '',
    data: {
      title: 'User',
      roles: [ROLE.User],
    },
    component: SecureLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'home',
        component: HomeComponent,
        data: { roles: [ROLE.User] },
        canActivate: [AuthGuard],
      },
      {
        path: 'shop',
        component: ShopComponent,
        data: { roles: [ROLE.User] },
        canActivate: [AuthGuard],
      },
      {
        path: 'orders',
        component: OrdersComponent,
        data: { roles: [ROLE.User] },
        canActivate: [AuthGuard],
      },
      {
        path: 'cart',
        component: StepperComponent,
        data: { roles: [ROLE.User] },
        canActivate: [AuthGuard],
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class UsersRoutingModule {}