Child guard: canActivateChild not working

Question

I tried to put in place a child guard like the angular doc:

@Injectable()
export class AuthGuardService implements CanActivate, CanActivateChild {

  constructor(private authService: AuthentificationService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url: string = state.url;

    return this.checkLogin(url);
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.canActivate(route, state);
  }

  checkLogin(url: string): boolean {
    /*****/
    return false;
  }
}

My routing.module:

import { AuthGuardService } from '../services/auth-guard.service';

const routes = [
    {
        path: '',
        component: MyComponent,
        canActivate: [AuthGuardService],
        children: [{
            path: '',
            canActivateChild: [AuthGuardService],
            children: [
                {
                    path: 'candidature',
                    component: ListCandidatureComponent,
                },
                {
                    path: 'candidature/new',
                    component: NewCandidatureComponent
                }]
        }, {
            path: 'login',
            component: LoginComponent,

        }]
    }
]

I put my canActivateChild guard on the component-less part, to guard this routing by a authentification.

But with this configuration, when i tried to reach 'my.site.com/candidature' i've got this error:

Unhandled Promise rejection: guard is not a function ; Zone: angular ; Task: Promise.then ; Value: TypeError: guard is not a function

Normally if i'm not authentitcated, i need to be redirected to the login page. Does someone get this error or know why it's lunched?

Thank's

Answer 1

The canActivateChild: [AuthGuardService], should not be inside children, but declared at the parent route.

Not really being sure, when you have declared children inside children of you need to declare the canActivateChild in the outer child as well. But you can test with and without it. Let me know if it works!

const routes = [
    {
        path: '',
        component: MyComponent,
        canActivate: [AuthGuardService],
        canActivateChild: [AuthGuardService] // it should be placed here!
        children: [{
            path: '',
            // canActivateChild: [AuthGuardService], // needed or not?
            children: [
                {
                    path: 'candidature',
                    component: ListCandidatureComponent,
                },
                {
                    path: 'candidature/new',
                    component: NewCandidatureComponent
                }]
        }, {
            path: 'login',
            component: LoginComponent,

        }]
    }
]

Hope this helps!

Answer 2

If find my solution. I explain for someone else who has the same problem.

Like excepted, the fact that the routing-module be a child routing module launch this error. I need to provide the AuthGuardService in de AppRouting to be used in a child-rounting-module like this:

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [RouterModule],
    declarations: [],
    providers: [AuthGuardService] //Here add the AuthGuardService to be available in route-module-child
})
export class AppRoutingModule {}