when i am using canActivate Guard it's leading to a blank page in angular 4?

Question

I am trying to implement login functionality with angular 4 but when I am using canActivate Guard its leading me to a blank page,please help me

This is My loginservice

 isAuthenticated(){
   return localStorage.getItem('token') != null ;
   }

This is canActivate guard

  canActivate(route : ActivatedRouteSnapshot , state : RouterStateSnapshot){

    return this.loginservice.isAuthenticated();
  }

This is Router Module

 const appRoutes: Routes = [
  {path : '' , redirectTo:'/login', pathMatch :'full' },
  {path : 'login' , component : LoginComponent },
  {path : 'home' , component : HomeComponent, canActivate : [AuthGuard] ,children :[

          {path : 'adduser' , component : AdduserComponent },
          ]  

Answer 1

Your AuthGuard should redirect you to a default page if you are not authenticated or unauthorized.

constructor( private loginservice: LoginService, private router: Router) {

    }
public canActivate(route : ActivatedRouteSnapshot , state : RouterStateSnapshot){

    if(!this.loginservice.isAuthenticated()) {
            this.router.navigate(['login']); // choose either default route like here
            return false;
        }
    return true;
  }