𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 𝗔𝗿𝗲 𝗡𝗼𝘁 𝗔 𝗚𝗼𝗼𝗱 𝗙𝗶𝘁 𝗙𝗼𝗿 𝗚𝘂𝗮𝗿𝗱𝘀
Angular 22 introduced the stable Resource API. This tool helps you query APIs and tracks loading or error states. It works well for many tasks.
However, do not use it in Guards or Resolvers.
Guards and Resolvers block navigation. A Guard checks if a user can access a route. A Resolver fetches data before a component loads. Both require a boolean, a Promise, or an Observable to finish their logic.
Resources belong to the Signals API. Signals are reactive. They do not return values synchronously. When you create a Resource, the value starts as undefined. It then moves to a loading state.
Look at this mistake:
export const authGuard: CanActivateFn = () => {
const authResource = httpResource
return authResource.value() ?? false; };
The .value() method returns the current signal value immediately. Because the API call takes time, the value is undefined at the start. The Guard sees undefined, treats it as false, and cancels the navigation. The app never waits for the API.
To fix this, you must convert the Resource into an Observable. This adds unnecessary complexity.
Guards need to represent a single asynchronous event. For this, use HttpClient with Observables or the native fetch API with Promises.
The right way:
export const authGuard: CanActivateFn = () => { const http = inject(HttpClient);
return http.get
The Observable tells the Router to wait until the request completes.
Use the Resource API for components and services. It is great for binding async data to your templates. Save Promises and Observables for your Router logic.
Source: https://dev.to/geromegrignon/angular-resources-are-not-a-good-fit-for-guards-58j