Angular: Guard after resolved data

Question

I'm having a route /invoices/:invoiceId for an invoice detail view which needs to be protected with 2 conditions

1. User needs to be authenticated --> Redirect to login page
2. Invoice with given id belongs to the logged in user --> Redirect to homepage with error message

My idea was to use a guard for authentication state - and since the view needs the invoice data - a resolver for loading the invoice.

But, what if the data can't be loaded from the resolver? E.g. server error, authenticated user not allowed to load the given invoice id, ... What's the best approach here?

• Resolve the invoice to null and handle the redirect from the component?
• Using another guard instead of a resolver to load the invoice and handle the error? But how to pass the successful data to the InvoiceComponent?

Since guards are executed before any resolvers, i can't add another guard at the end.

Route

{
  path: 'invoice/:invoiceId',
  component: InvoiceComponent,
  canActivate: [authGuard],
  resolve: { invoice: invoiceResolver }
}

auth.guard.ts

export const authGuard: CanActivateFn = (_route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
  const authenticationPolicy = inject(AuthenticationPolicy);
  const router: Router = inject(Router);

  return authenticationPolicy.isGranted().pipe(
    catchError(() => {
      const queryParams = { referrer: state.url };
      const redirectUrl: UrlTree = router.createUrlTree(['login'], { queryParams });

      return of(redirectUrl);
    })
  );
};

invoice.resolver.ts

export const invoiceResolver: ResolveFn<Observable<Invoice | null>> = (route: ActivatedRouteSnapshot) => {
  const invoiceId = parseInt(route.paramMap.get('invoiceId') ?? '0', 10);

  const invoiceApiService = inject(InvoiceApiService);

  return invoiceApiService.invoice(invoiceId).pipe(catchError(() => of(null)));
};