lazy loading with CanActive

Question

I implemented lazy loading in my project and it works well: the components load only if the http route is requested. but when I implement canActive to prevent some users from accessing: the user can no longer access but Lazy loading still loads unauthorized components... how to make unauthorized components not load.???

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {
  PageNotFoundComponent
} from "./components/communications/pages/page-not-found/page-not-found.component";
import {HomeComponent} from "./components/home/home.component";
import {SettingService} from "./service/setting.service";

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'admin',
    canActivate: [SettingService],
    loadChildren: () => import('./components/admin_resources/admin/admin.module').then(a => a.AdminModule)
  }
  ,
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

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