title: NGRX + Resolver not working: Component seems to be loading before action is done dispatching
body: <p>I'm trying to fetch the data from a route and load the data into my state before showing my detail component, and for this reason I have created a resolver. My get request is working, that I know, but it seems as if the api call is done after the component is loaded.</p>
  
  <pre><code>@Injectable()
  export class WorkOrderDetailResolver implements Resolve&lt;WorkOrder&gt; {
  
      constructor(
          private store: Store&lt;fromApp.AppState&gt;
      ) { }
  
      waitForWorkOrderDataToLoad(route, state) {
          this.store.dispatch(new WorkOrderActions.FetchWorkOrderFromAPIByID(+route.params['id']));
          return this.store.select(state =&gt; state.workOrder.workOrderDetails).pipe(take(1));
      }
  
      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;WorkOrder&gt; | Promise&lt;WorkOrder&gt; | WorkOrder {
          return this.waitForWorkOrderDataToLoad(route, state);
      }
  }
  </code></pre>
  
  <p>These are my routes where I clearly apply the resolver to the WorkOrderDetailsComponent</p>
  
  <pre><code>   const workOrderRoutes: Routes = [
          { 
              path: 'workorders', 
              component: WorkOrderComponent,
              children: [
                  { path: 'new', component: WorkOrderEditComponent },
                  { path: 'list', component: WorkOrderListComponent },
                  { path: ':id', component: WorkOrderDetailComponent, resolve: { workOrderDetails: WorkOrderDetailResolver } },
                  { path: ':id/edit', component: WorkOrderEditComponent }
              ]
           }
      ];
  </code></pre>
  
  <p>And finally here is the code for the WorkOrdersDetailComponent:</p>
  
  <pre><code>@Component({
    selector: 'app-work-order-detail',
    templateUrl: './work-order-detail.component.html',
    styleUrls: ['./work-order-detail.component.css']
  })
  export class WorkOrderDetailComponent implements OnInit {
    private id: number; 
    workOrder: WorkOrder;
    workOrderState: Observable&lt;{workOrders: WorkOrder[]}&gt;;
  
    constructor(private route: ActivatedRoute,
                private router: Router,
              ) { }
  
    ngOnInit() {
      console.log(this.route.snapshot.data);
      this.workOrder = this.route.snapshot.data.workOrderDetails;
    }
  
    onEditWorkOrder() {
      this.router.navigate(['edit'], {relativeTo: this.route});
    }
  
  }
  </code></pre>
  
  <p>To explain what my goal is with the code in the resolver is, Dispatch the action for fetching an workOrder by id from my API and store it the state (this works), once this is done, and ONLY after it is done, return an observable of the workOrder that I stored in the state and load the WorkOrderDetailComponent. </p>
  
  <p>The error I the view cannot read value of null for the workOrder the first time the route is loaded, but what then happens is that if I navigate away and back to the page, the workOrder is not null anymore. So my guess is the resolver is for some reason not doing it's magic before the component is loaded? What I want is for the resolver to return Observable&lt;{WorkOrder]> so that I can load it asynch in the view.</p>
  
  <p>Also, it could very much be just an issue with me not using the rxjs operators properly for this, I'm having quite a hard time grasping how observables work and how these operators should be chained. If that is the case, please enlighten me of what is wrong and why.</p>
  
  <p>Thanks! </p>