How to use CanActivateFn in Angular 16 via constructor dependency injection

Question

How can I make use of the latest CanActivateFn in Angular 16 with DI?

The recent Angular 16 uses a function, not a class, for the canactivate functionality. This is my code below. How can I add my DI's that would normally be in the constructor in the function?

CanActivateFn function code:

export const authGuard: CanActivateFn = (
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  return inject(TokenService).authenticated.pipe(
    take(1),
    map((status) => {
      console.log('auth status: ', status);
      if (!status) {
        return inject(Router).createUrlTree(['/login']);
      }
      return true;
    })
  );
};

The route settings:

const routes: Routes = [
  {
    path: '',
    component: DefaultComponent,
    canActivate: [authGuard],
    children: [
      {
        path: '',
        component: DashboardComponent,
        data: { title: 'My Dashboard' },
      },
]

Answer 1

I figured it out. I tried this. I updated my service BehavoirSubject variable to use signal().

export class TokenService {
  authenticated = signal(false);
}

Then I updated my authGuard function using the inject() function.

export const authGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  // console.log('guard status: ', inject(TokenService).authenticated());

  return inject(TokenService).authenticated()
    ? true
    : inject(Router).createUrlTree(['/auth/login']);
};

This approach worked for me.

Answer 2

import { Injectable, inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { CookieService } from 'ngx-cookie-service';


@Injectable()
 export class PermissionsService {

 constructor(
 private cookieService: CookieService,
 public router: Router,
 ) { }

 canActivate(): boolean {
 if (this.cookieService.get('teacher-plus-user')) {
   return true
 } else {
   this.router.navigate(['/login']);
   return false
   }
 }

 }

export const authGuardGuard: CanActivateFn = (route, state) => {
  return inject(PermissionsService).canActivate();
};