title: Chaining Observables resulting in nested observables
body: <p>I'm new to RxJS and Observables so I'm still trying to wrap my head around the right way to do things.  </p>
  
  <p>I have two functions:</p>
  
  <pre><code>functionRetrieveStuff() : Observable&lt;MyObject&gt; {}
  
  functionDoStuff(param1: MyObject) : Observable&lt;boolean&gt; {}
  </code></pre>
  
  <p>The output of RetrieveStuff is the input for DoStuff.  I call these from instead the following:</p>
  
  <pre><code>mainFunction() : Observable&lt;boolean&gt; {
      return this.functionRetrieveStuff().map(response =&gt; {
          return this.functionDoStuff(response);
      })
  }
  </code></pre>
  
  <p>This results in the following compile error:</p>
  
  <pre><code>Error:(33, 16) TS2322: Type 'Observable&lt;Observable&lt;boolean&gt;&gt;' is not assignable to type 'Observable&lt;boolean&gt;'.
  </code></pre>
  
  <p>Type 'Observable' is not assignable to type 'boolean'.</p>
  
  <p>If I'm reading the documentation at reactivex.io correctly, I think the solution to my problems is switchMap.  So if I update my mainFunction to this:</p>
  
  <pre><code>mainFunction() : Observable&lt;boolean&gt; {
      return functionRetrieveStuff().switchMap(response =&gt; {
          return functionDoStuff(response);
      })
  }
  </code></pre>
  
  <p>The compiling error goes away, but I get an error when I use the mainFunction in my canActivate guard when I try use the function: </p>
  
  <pre><code>TypeError: Cannot read property 'switchMap' of undefined
  </code></pre>
  
  <p>Here's how I use mainFunction in my canActivate guard's canActivate method:</p>
  
  <pre><code>return this.mainFunction().first().map(result =&gt; {
          return true;
      });
  </code></pre>
  
  <p>So I'm not sure if I'm using mainFunction is incorrect or if I'm calling it incorrectly.  Any insight would be appreciated.  Thanks.</p>