title: Angular 9 return Observable from an Observable
body: <p>I am looking for a way to return an Observable from another Observable. I found that you can do that using <strong>pipe</strong> and <strong>map</strong> operators, but it does not seem to be working for me. What am I doing wrong ?</p>
  <p>I am using <strong>Angular 9.1.12</strong> and <strong>rxjs ~6.5.4</strong>.</p>
  <p>Example:
  Service1</p>
  <pre class="lang-js prettyprint-override"><code>import { Observable, of } from 'rxjs';
  
  export class Service1 {
  
    test(): Observable&lt;string&gt; {
        console.log(1);
        return of('hey');
    }
  }
  </code></pre>
  <p>Service2</p>
  <pre class="lang-js prettyprint-override"><code>import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  export class Service2 {
  
    constructor(private service1: Service1) {}
  
    test(): Observable&lt;string&gt; {
      return this.service1.test().pipe(
        map((value: string) =&gt; {
          console.log(2);
          return value;
        })
      );
    }
  }
  </code></pre>
  <p>Component</p>
  <pre class="lang-js prettyprint-override"><code>import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  export class Component implements OnInit {
  
    constructor(private service2: Service2) {}
  
    test(): Observable&lt;void&gt; {
      return this.service2.test().pipe(
        map((value: string) =&gt; {
          console.log(3);
        }));
      }
    }
  }
  </code></pre>
  <p>The console will only output <code>1</code>.</p>