Les Resources Angular ne sont pas adaptées aux Guards

Angular 22 a introduit l'API Resource stable. Cet outil vous aide à interroger des API et suit les états de chargement ou d'erreur. Il fonctionne bien pour de nombreuses tâches.

Cependant, ne l'utilisez pas dans les Guards ou les Resolvers.

Les Guards et les Resolvers bloquent la navigation. Un Guard vérifie si un utilisateur peut accéder à une route. Un Resolver récupère des données avant le chargement d'un composant. Tous deux nécessitent un booléen, une Promise ou un Observable pour terminer leur logique.

Les Resources font partie de l'API Signals. Les Signals sont réactifs. Ils ne retournent pas de valeurs de manière synchrone. Lorsque vous créez une Resource, la valeur commence par être undefined. Elle passe ensuite à un état de chargement.

Regardez cette erreur :

export const authGuard: CanActivateFn = () => {
  const authResource = httpResource<boolean>(() => ({
    url: '/api/auth/status',
  }));

  return authResource.value() ?? false;
};

La méthode .value() retourne immédiatement la valeur actuelle du signal. Comme l'appel API prend du temps, la valeur est undefined au début. Le Guard voit undefined, le traite comme false et annule la navigation. L'application n'attend jamais l'API.

Pour corriger cela, vous devez convertir la Resource en Observable. Cela ajoute une complexité inutile.

Les Guards doivent représenter un événement asynchrone unique. Pour cela, utilisez HttpClient avec des Observables ou l'API fetch native avec des Promises.

La bonne méthode :

export const authGuard: CanActivateFn = () => {
  const http = inject(HttpClient);

  return http.get<boolean>('/api/auth/status');
};

L'Observable indique au Router d'attendre que la requête soit terminée.

Utilisez l'API Resource pour les composants et les services. Elle est idéale pour lier des données asynchrones à vos templates. Réservez les Promises et les Observables pour votre logique de Router.

Source : https://dev.to/geromegrignon/angular-resources-are-not-a-good-fit-for-guards-58j