title: Resolve a value *before* activating a route in Angular 2
body: <p>I'd like to prevent a route from being accessed as long as a promise hasn't been resolved. Also, I'd like to pass the return value of that promise to the route component.</p>
  
  <p><a href="https://stackoverflow.com/questions/36260780/angular-2-resolve-root-component-before-instantiating-child-components">Several</a> <a href="https://stackoverflow.com/questions/34734367/angular-2-router-resolve-server-request-before-opening-a-component">posts</a> on SO recommend using the <code>OnActivate</code> interface for this. The <a href="https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html" rel="nofollow noreferrer">documentation</a> says: "If <code>routerOnActivate</code> returns a promise, <strong>the route change will wait until the promise settles to instantiate and activate child components</strong>." Sounds perfect, only the route still gets activated immediately... (Is it because it's the <em>child components</em> of Route2 that will wait for the promise, not the Route2 component itself??)</p>
  
  <p>See <a href="https://plnkr.co/edit/ipKrOgfRj0vKk8ZejH5v?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/ipKrOgfRj0vKk8ZejH5v?p=preview</a>. The Route2 component implements the <code>OnActivate</code> interface, but when you click the Route2 link, <strong>the Route2 component is activated immediately</strong>. However, the URL does update to <code>/route2</code> only after the promise has resolved. (Launch the Plunker in a separate window to see what I mean.) Now I don't care so much about the URL, the Route2 component should not instantiate at all until the promise is resolved.</p>
  
  <p>My other strategy was to use the <code>@CanActivate</code> decorator. It better suits my purpose as "it is called by the router to determine if a component can be instantiated as part of a navigation".</p>
  
  <p>The problem here is <strong>how to pass data from the promise in the <code>@CanActivate</code> decorator to the component</strong>?</p>
  
  <p>I have seen people write their data into a property of the <code>next</code> parameter of the decorator, and retrieve it in the <code>next</code> parameter of the <code>routerOnActivate</code> method.</p>
  
  <p>For instance in <code>next.params</code> (<a href="https://stackoverflow.com/a/34159997/1153681">here</a>):</p>
  
  <pre><code>@CanActivate((next) =&gt; {
    return messageService.getMessage()
        .then((message) =&gt; {
           next.params.message = message;
           return true;
        });
  })
  export class MyComponent implements OnActivate {
    routerOnActivate(next) {
      this.message = next.params.message;
    }
  }
  </code></pre>
  
  <p>Or in <code>next.routeData.data</code> (<a href="https://stackoverflow.com/a/34927099/1153681">here</a>).</p>
  
  <p>But the <a href="https://angular.io/docs/ts/latest/api/router/ComponentInstruction-interface.html" rel="nofollow noreferrer">documentation</a> says ComponentInstruction objects "should be treated as immutable". This is confusing.</p>
  
  <p>Is this the best way to do this?</p>
  
  <p>Maybe the router in its current state isn't finalized and there will be a better way when a stable Angular 2 is released?</p>