title: How to attach ngrx/store with an angular router guard
body: <p>I'm a beginner with ngrx/store and this is my first project using it.</p>
  <p>I have successfully set up my angular project with ngrx/store and I'm able to dispatch a load action after initializing my main component like this:</p>
  <p><code>ngOnInit() { this.store.dispatch({type: LOAD_STATISTICS}); }</code></p>
  <p>I have set up an effect to load the data when this action is dispatched:</p>
  <pre><code>@Effect()
  loadStatistic = this.actions.ofType(LOAD_STATISTICS).switchMap(() =&gt; {
      return this.myService.loadStatistics().map(response =&gt; {
          return {type: NEW_STATISTICS, payload: response};
      });
  });
  </code></pre>
  <p>My reducer looks like this:</p>
  <pre><code>reduce(oldstate: Statistics = initialStatistics, action: Action): Statistic {
      switch (action.type) {
          case LOAD_STATISTICS:
              return oldstate;
          case NEW_STATISTICS:
              const newstate = new Statistics(action.payload);
  
              return newstate;
      ....
  </code></pre>
  <p>Although this works, I can't get my head around how to use this with a router guard as I currently need to dispatch the LOAD_ACTION only once.</p>
  <p>Also, that a component has to dispatch a LOAD action, to load initial data doesn't sound right to me. I'd expect that the store itself knows that it needs to load data and I don't have to dispatch an action first. If this were the case, I could delete the ngOnInit() method in my component.</p>
  <p>I already have looked into the ngrx-example-app but I haven't understood really how this works.</p>
  <p>EDIT:</p>
  <p>After adding a resolve guard that returns the ngrx-store observable the route does not get activated. Here is the resolve:</p>
  <pre><code>   @Injectable()
    export class StatisticsResolver implements Resolve&lt;Statistic&gt; {
      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;Statistic&gt; {
          // return Observable.of(new Statistic());
          return this.store.select(&quot;statistic&quot;).map(statistic =&gt; {
          console.log(&quot;stats&quot;, statistic);
  
          return statistic;
      });
  }
  </code></pre>
  <p>This is the route:</p>
  <pre><code>const routes: Routes = [
      {path: '', component: TelefonanlageComponent, resolve: {statistic:  TelefonieStatisticResolver}},
  ];
  </code></pre>