angular2在AuthGuard中实现接口

Question

I try to implement auth guard protection to my app, here is my code:

import {Injectable} from '@angular/core'
import {Router, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router'
import {CanActivate} from '@angular/router'
import {Auth} from './services/auth.service'

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth:Auth, private router:Router){

    }
    CanActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot){
        if(this.auth.authenticated()){
        console.log("AUTH GUARD LET GO");
        return true;
        }
        else{
            console.log("BLOCKED BY AUTH GUARD");
            this.router.navigate(['/']);
            return false;
        }
    }
}

and the error message:

[ts] Class 'AuthGuard' incorrectly implements interface 'CanActivate'. Property 'canActivate' is missing in type 'AuthGuard'.

I make search on net but couldnt find any valuable information please help me if you have come across with this kind of issue and solved or any idea you got about it..

Answer 1

The error is saying your app can't find the correct function to use for can activate. The canActivate function name is camelCase, try

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    //logic
}

Answer 2

This problem sometimes happen when you import from wrong libraries. Check the import statement. Change
import { CanActivate } from'@angular/router/src/utils/preactivation';
to
import { CanActivate } from '@angular/router';

Thanks!