How to inject the NGRX store in a functional angular resolver

Question

I'm trying to convert my class-based resolver to a functional one. Injecting NGRX store is not working.

export const loadCategoriesParentCategoryCodeResolver
  : ResolveFn<boolean> = (
  route, 
  state,
  store: Store<any> = Inject(Store<any>)) => {
  let loading = false;

  return store.pipe(
    tap(() => {
    if(!loading){
     loading = true;
     store.dispatch(
      loadCategoriesByParentCategoryCodeRequest({ 
        parentCategoryCode: null }))
     }
   }),
   first(),
   finalize(() => loading = false)
  );
 };

In a class-based resolver, I would just inject the store in the constructor.

constructor(private _store: Store<Any>){}

Unfortunately, I'm getting the error that pipe doesn't exist. I've tried both store: Store<any> = Inject(Store<any>, but it is not working.

Answer 1

See the ResolveFn documentation.

export const loadCategoriesParentCategoryCodeResolver: ResolveFn<boolean> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
  const store = inject(MyStore); // Change MyStore according to your store DI token
  let loading = false;

  return store.pipe(
    tap(() => {
    if(!loading){
     loading = true;
     store.dispatch(
      loadCategoriesByParentCategoryCodeRequest({ 
        parentCategoryCode: null }))
     }
   }),
   first(),
   finalize(() => loading = false)
  );
 };