Angular's "CanActivate" interface is deprecated. How to replace it?

Question

My Angular app includes a simple AuthGuard as shown below and there has never been a problem with it. Recently, I upgraded my Angular version from 15.1.4 to 15.2.0 and since then, my IDE indicates that both CanActivate and CanActivateChild are deprecated.

The official Angular documentation for CanActivate says:

Deprecated: Use plain JavaScript functions instead.

How would I need to adjust the code below to get rid of the deprecated warning?

export class AuthGuard implements CanActivate, CanActivateChild {

    constructor(private authService: AuthenticationService) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree  {
        return this.authService.checkLogin()
            .pipe(
                map(() => true),
                catchError(() => {
                    this.router.navigate(['route-to-fallback-page']);
                    return of(false);
                }
            )
        );
    }

    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        return this.canActivate(route, state);
    }
}

Answer 1

The trick is to rely on inject() for the injection of the instances you need :

export const canActivate: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  const authService = inject(AuthenticationService);
  const router = inject(Router);

  return authService.checkLogin().pipe(
    map(() => true),
    catchError(() => {
      return router.createUrlTree(['route-to-fallback-page']);
    })
  );
};

export const canActivateChild: CanActivateChildFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => canActivate(route, state);

inject() allows you to use the dependency injection when you are in an injection context. For example in a constructor or like here when passing a function to a core Angular feature.

You can also read about it on the depreciation list.

Also Since v16, Angular provides some helper functions to convert classes to functionnal guards like mapToCanActivate :

@Injectable({providedIn: 'root'})
export class AdminGuard {
  canActivate() {
    return true;
  }
}

const route: Route = {
  path: 'admin',
  canActivate: mapToCanActivate([AdminGuard]),
};

You can find the others here.

Answer 2

As stated in the official doc :

Class-based Route guards are deprecated in favour of functional guards. An injectable class can be used as a functional guard using the inject function: canActivate: [() => inject(myGuard).canActivate()].

This means the canActivate method implementation via the implements CanActivate class in the child class is deprecated. Instead, you have to call this function directly from your routing module file where the declaration of the component happens.

// Routing Module File.ts

// Example 1 ~ Without parameters

{
    path: 'Dashboard',
    canActivate: [() => inject(AuthGuard).canActivate()], // AuthGuard is your same class as it was before
    component: DashboardComponent 
}

// Example 2 ~ With parameters

{
    path: 'Dashboard',
    canActivate: [(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => inject(AuthGuard).canActivate(next, state)],
    component: DashboardComponent
}

Hope this will help you or somebody else. Thanks!

Happy Coding :-)

Answer 3

As mentioned in Angular Doc that Class based guards are deprecated here doc link

So to overcome CanActivate Deprecated issue you need to write function based route guards as mentioned in angular doc. for that inject() can help you for injecting dependency which you done in constructor of class based guard.

Converted your code w.r.t. functional auth guard:

 export const authGuard: CanActivateFn = (
   route: ActivatedRouteSnapshot,
   state: RouterStateSnapshot
 ): Observable<boolean | UrlTree | Promise<boolean | UrlTree | boolean | UrlTree = {

    
    // here injecting dependencies
    const authService = inject(AuthenticationService);
    const router = inject(Router);


    // here you existing implementation of canActivate
    return authService.checkLogin().pipe(
     map(() = true),
     catchError(() = {
       void router.navigate(['route-to-fallback-page']);
       return of(false);
     })
   );
 };

Answer 4

Anyone knows what is the reason behind this quite breaking change in minor version?

Some of us have a lot of logic inside Guard classes. Others have lots of guards. In such cases, to still keep the separation, I would go with the following approach (using static class methods):

export namespace AuthGuard {
    export const canActivate = (
        route: ActivatedRouteSnapshot, 
        state: RouterStateSnapshot
    ) => {
        const authService = inject(AuthenticationService);
        const router = inject(Router);

        return authService.checkLogin().pipe(
                map(() => true),
                catchError(() => {
                    router.navigate(['route-to-fallback-page']);
                    return of(false);
                }
            )
        );
    }

    export const canActivateChild = (
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ) => canActivate(route, state);
}

Then in your router config:

{
    ...
    canActivate: [AuthGuard.canActivate],
    canDeactivate: [AuthGuard.canDeactivate],
}

Is there any downside with such approach?

Answer 5

base on: https://angular.io/guide/router#preventing-unauthorized-access

old:

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean 
  {
    //your logic goes here
  }
}

new:

@Injectable({
  providedIn: 'root'
})
class PermissionsService {

  constructor(private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      //your logic goes here
  }
}

export const AuthGuard: CanActivateFn = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean => {
  return inject(PermissionsService).canActivate(next, state);
}

there is no need to change in your routes and can use it same as old:

 {
    path: 'Dashboard',
    canActivate: [AuthGuard],
    component: DashboardComponent
  }