How to use resolve with Store

Question

I'm using the resolve method of the Routes interface to resolve routes data from the Store (ngrx) by returning a reducer observable in the canUse method of the Resolve interface. However unlike HtppClient's http method's returned Observables, Store's returned Observable doesn't seem to work the same way.

I have a resolver class called ResolveFromStore which looks like this:

@Injectable()
export class ResolveFromStore implements Resolve<Observable<any>> {
observable:Observable<any>
constructor(
    private _store:Store<any>
) {
    // the reducer
    this.observable = this._store.select(from_store_index.getLanguage);
}
    resolve(route: ActivatedRouteSnapshot) {
              return this.observable;  
    }
}

And in my router I'm incorporating it as so:

 const routes: Routes = [{
    path: '',
    component: PostPaidPageComponent,
    children: [
        {
            path: 'treatment',
            component: TreatmentPostpaidComponent,
            resolve: {
                fromStore: resolvers.ResolveFromStore 
            }
        }...

How ever this does not seem to work with store subscription, unlike http subscription which resolve fine.
I am returning an observable in the resolve function, so what could be wrong.

Answer 1

I don't think that using a resolver is a god fit here.

When you pass an observable to the resolve function, it'll wait for that observable to complete BEFORE letting you go the requested route.

One easy fix but with a huge limit... Is to use first or take(1) on your observable. But of course, you'll get the value only once after that.

I've made a whole question asking why resolver would be useful because of that: Why would you use a resolver with Angular