Why isn't id available in the below guard?

@Injectable()
export class ProjectDetailsGuard implements CanActivate {

    constructor(private activatedRoute: ActivatedRoute) { }

    canActivate() {
        const id = this.activatedRoute.snapshot.params['id'];

        console.log(id); // <-- undefined
    }

}

The same code works perfectly when implemented inside ponents.

Why isn't id available in the below guard?

@Injectable()
export class ProjectDetailsGuard implements CanActivate {

    constructor(private activatedRoute: ActivatedRoute) { }

    canActivate() {
        const id = this.activatedRoute.snapshot.params['id'];

        console.log(id); // <-- undefined
    }

}

The same code works perfectly when implemented inside ponents.

• javascript
• angular
• angular-routing
• angular-router
• angular-router-guards

• 1 Please look at angular.io/api/router/CanActivate, canActivate is passed the route data. – jlareau Commented Aug 25, 2017 at 15:06

1 Answer 1

The ActivatedRoute can provide params only after the route is activated. If need to get params before it is activated i.e in canActivate method, try with ActivatedRouteSnapshot

canActivate(activatedRoute: ActivatedRouteSnapshot) {
    const id = activatedRoute.params['id'];

    console.log(id); 
}