title: Wait for http inside Guard on Angular 5
body: <p>I'm using a Guard on an Angular application to resolve initial critical data. On the version 4 of Angular I was duing it like this:</p>
  
  <pre><code>// app.routing.ts
  routing = [{
      path: '', component: AppComponent, canActivate: [ResolveGuard],
  }];
  
  // resolve.guard.ts
  @Injectable()
  export class ResolveGuard implements CanActivate {
      constructor(
          private _api: ApiService,
      ) { }
  
      canActivate(): any {
          return this._api.apiGet('my/url').map(response) =&gt; {
              if ( response.status === 'success') {
                  // Consume data here
                  return true;
              }
  
              return false;
          }).first();
      }
  }
  </code></pre>
  
  <p>Since the new version of <a href="https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced" rel="noreferrer">Http on Angular 5</a> doesn't use the <code>.map()</code> property anymore, this is not working.</p>
  
  <p>If I change <code>.map()</code> to <code>.subscribe()</code> it doesn't throw any errors, but the application never resolve properly. On the other hand, using <code>.first()</code> and/or <code>.map()</code> throw some errors, as expected in this version.</p>
  
  <p>What should I do in this case?</p>
  
  <p>I need to activate that route only if and when the initial data is loaded.</p>
  
  <hr />
  
  <p>Edit to add info about the <code>apiGet</code> function:</p>
  
  <pre><code>constructor(private _http: HttpClient) {}
  
  public apiGet(url: string): any {
      return this._http
          .get(this.apiUrl + url)
          .catch(this.handleError.bind(this));
  }
  </code></pre>