Angular - How to resolve CanActivate deprecated in Angular-15 using Auth Guard

Issue

AuthGuard:

import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, CanActivateFn, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private route:Router){}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if(localStorage.getItem('userdata')){
      return true;
    }else{
      this.route.navigate(['login'])
      return false;
    }
  }
}  

I got an error that

'CanActivate' is deprecated.ts(6385)
index.d.ts(302, 4): The declaration was marked as deprecated here.

How do I resolve this, and I want To deny access to a dashboard without a successful login and redirect users back to the login page

Solution

You can use the canActivateFn equivalent of the same!

import { inject } from '@angular/core';
import { Router, CanActivateFn } from '@angular/router';

const AuthGuard: CanActivateFn = () => {
     const route = inject(Router);
     if(localStorage.getItem('userdata')){
         return true;
     }else{
         route.navigate(['login'])
         return false;
     }
};

Answered By - Naren Murali