title: Angular: wait for the return of one observable to initiate the other
body: <p>My business scenario is like this:
  I first issue a HTTP request to the token() endpoint in the WebAPI to get an auth token (this happens in the app.component.ts). Then I have a token-interceptor module to append the token to the HTTP headers of the subsequent requests.</p>
  
  <p>Then I have a getLanguages() endpoint in the WebAPI, and this gets called within my header component - header.component.ts. So this call goes through the HTTP interceptor and try to append the token generated to the request header, but it fails because the token() endpoint has not returned yet, so the getLanguages() endpoint is not authenticated.</p>
  
  <p>I'm obviously missing something here. I've read about <code>ReplaySubject</code> but I'm not sure how to put everything together.</p>
  
  <p>Here's my current code.</p>
  
  <h2>app.component.html:</h2>
  
  <pre><code>&lt;app-header&gt;
  &lt;/app-header&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;app-footer&gt;
  &lt;/app-footer&gt;
  </code></pre>
  
  <h2>auth.service.ts:</h2>
  
  <pre><code> authenticateClient(){
  
  let body = new HttpParams()
    .set('client_id', AppConst.GLOBAL.auth.client_id)
    .set('grant_type', AppConst.GLOBAL.auth.grant_type)
    .set('scope', AppConst.GLOBAL.auth.scope);
  
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/x-www-form-urlencoded'
    })
  };
  
  let authGatewayUrl: string = AppConst.GLOBAL.authApiUrl + window.location.search;
  
  return this.http.post(authGatewayUrl, body.toString(), httpOptions)
            .pipe(map((res: any) =&gt; this.token = res), catchError(this.handleErrorObservable));
        }
  
    getToken(): Token {
      return this.token;
    }
  </code></pre>
  
  <h2>app.component.ts:</h2>
  
  <pre><code>token: Token;
  
   ngOnInit() {
  // get the authentication token and store it for usage in subsequent API calls.
  this.authService.authenticateClient().subscribe(
    obj =&gt; this.token = obj as Token,
    err =&gt; alert(err)
    );
    }
  </code></pre>
  
  <h2>app.service.ts:</h2>
  
  <pre><code>  getLanguages() {
   return this.http.get(this.localeApiUrl)
    .pipe(map((res: any) =&gt; this.languages = res), catchError(this.handleErrorObservable));
    }
  </code></pre>
  
  <h2>header.component.ts:</h2>
  
  <pre><code>   constructor(private appService: AppService) {
      this.appService.getLanguages().subscribe(obj =&gt; this.languages = obj);
  
    };
  </code></pre>
  
  <h2>http-interceptor.ts:</h2>
  
  <pre><code>intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler) {
  // exclude the token API endpoint from the interception
  const loginUrl: string = AppConst.GLOBAL.authApiUrl;
  
  if (req.url.search(loginUrl) === -1) {
    // Get the auth token from the service.
    const authToken = this.auth.getToken();
  
    //// Clone the request and set the new header in one step.
    req = req.clone({ setHeaders: { Authorization: authToken.access_token } });
  }
  
  //// send cloned request with header to the next handler.
  return next.handle(req);
   }
  </code></pre>