angular 9 why canActivateChild start befor canActivate completed?

Question

in my program I have a func in canActivateChild that need to occur after canActivate finished , but the child component loads befor canActivate of the parent finish,why?

my routing-module:
const routes: Routes = [

    {
    path: '',
    component: MainComponent,
    canActivate: [LoadDataGuard, ConfigureJsGuard],
    canActivateChild: [EnterChildGuard],
    canDeactivate: [CleanupJsGuard],
    data: {
        modelService: ModelService,
     
    } ,
    children: [
        {
            component: ChildComponent,
         .......

Answer 1

you can add canActivateChild to empty path child of main route

like

{
path: '',
component: MainComponent,
canActivate: [LoadDataGuard, ConfigureJsGuard],
canDeactivate: [CleanupJsGuard],
data: {
    modelService: ModelService,
 
} ,
children: [
    path: '',
    canActivateChild: [EnterChildGuard],
    children: [
    {
        component: ChildComponent,
      .......
      },
    ]