title: Angular route loading with async redirect
body: <p>I need to wait for some API call before letting page in my route to load. Basically we have A/B testing enabled (which is API call) and based on that will have to either load Component assosiated with that route or redirect to different url.
  To do that I was trying to use resolver that returns <code>Observable&lt;boolean&gt;</code>. Here is code:</p>
  <pre class="lang-js prettyprint-override"><code>export class RedirectResolveService implements Resolve&lt;Observable&lt;boolean&gt;&gt; {
    private empty = new Observable&lt;boolean&gt;();
    constructor(private apiService: ApiService, private router: Router) {}
  
    resolve(
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable&lt;boolean&gt; {
      return this.apiService.get(&quot;/api/abtest/mypage&quot;).pipe(
        tap((isOn) =&gt; {
          if (!isOn) {
            window.location.href = &quot;/welcome-page&quot;;
          }
        }),
        first()
      );
    }
  }
  </code></pre>
  <p>Then I add this in the route:</p>
  <pre class="lang-js prettyprint-override"><code>{
    path: 'new-page',
    component: NewPageComponent,
    resolve: {
      redirect: RedirectResolveService,
    },
  },
  </code></pre>
  <p>And then in NewPageComponent I add subscription in the constructor:</p>
  <pre class="lang-js prettyprint-override"><code>export class NewPageComponent {
    constructor(private route: ActivatedRoute) {
      this.route.data.subscribe();
    }
  }
  </code></pre>
  <p>It works but for the case when redirect happens I see first NewPageComponent rendered and then redirect happening. That makes sense since I subscribe to my Observable when Component initializes and thus only start redirect after that.</p>
  <p>Is there way to make redirect logic without Component being initialized?</p>