We’re trying to implement a functional guard but an error keeps occurring relating to the injected services.

Code: role.guard.ts:

import { HttpClient } from "@angular/common/http";
import { inject } from "@angular/core";
import { CanActivateFn } from "@angular/router";
import { MsalService } from "@azure/msal-angular";
import { catchError, map } from "rxjs/operators";
import { MonitoringService } from "../services";

export const RoleGuard: CanActivateFn = (): Promise<boolean> => {
  const httpClient: HttpClient = inject(HttpClient);
  const msalService: MsalService = inject(MsalService);
  const monitoringService: MonitoringService = inject(MonitoringService);

  function checkRole(): Promise<boolean> {
    return new Promise((resolve) => {
      httpClient.get<void>('/api/v1/auth/isvaliduser')
        .pipe(
          map(() => {
            return Promise.resolve(resolve(true));
          }),
          catchError(() => {
            const user = msalService.instance.getActiveAccount().username;
            monitoringService.logTrace(`RoleGuard: User ${user} unauthorized.`);
            return Promise.resolve(resolve(false));
          })
        ).subscribe();
    });
  }

  return checkRole();
}

Usage: (Where MsalGuard is a class, and RoleGuard is a function.)

canActivate: [MsalGuard, RoleGuard]

When the functional guard runs, an error is raised:

NG0203: inject() must be called from an injection context such as a
constructor, a factory function, a field initializer, or a function
used with runInInjectionContext. Find more at
https://angular.io/errors/NG0203

We can’t seem to work out why this error is occurring. Can anyone else see any reason for this? Thanks in advance.