title: switchMap Type void is not assignable to type ObservableInput<{}>
body: <p>Im using Angular http and RXJS to retrieve some application settings. The http uses RXJS shareReplay to avoid multiple of the same calls.</p>
  
  <p>This is working as expected, and inspecting the Networks tab i can see only 1 call to my backend API.</p>
  
  <p>Some components within my app, will call the service and use the result to render the page. Other components, need to call the service like above, but then do 'something' with the result again, e.g more http calls and then render the page. When attempting to do the later, i get type error:</p>
  
  <pre><code>Argument of type '(result: any) =&gt; void' is not assignable to parameter of type '(value: any, index: number)' =&gt; ObservableInput&lt;{}&gt;
  </code></pre>
  
  <p>Over my switchMap use.</p>
  
  <p>-- Working simple example without switchMap ----</p>
  
  <p>cart.component.ts</p>
  
  <pre><code>ngOnInit() {
      this.systemPreferences.getPreferences()
          .subscribe(
              (result: any) =&gt; {
                  this.headerTitle = result.title || '';
              },
              (err) =&gt; {
                  console.log('there has been an error');
              },
              () =&gt; // Some completion code
          );
  }
  </code></pre>
  
  <p>systemPreferences.service.ts:</p>
  
  <pre><code>const CACHE_SIZE = 1;
  
  export class SystemPreferences {
      private $cache: Observable&lt;Object&gt;
  
      private requestConfig() {
           return this.http.get("/api/some/endpoint").pipe(
               map(response =&gt; response.value)
           );
      }
  
      public getPreferences() {
          if (!this.cache$) {
              this.cache$ = this.requestConfig().pipe(
               shareReplay(CACHE_SIZE)
              );
          }
  
          return this.cache$;
      }
  }
  </code></pre>
  
  <p>/api/some/endpoint example response:</p>
  
  <pre><code>{
      "appName": "Tables Forks and Spoons",
      "title": "My title",
      "regionUrls": [
          "http://www.region1.com:8021",
          "http://www.region2.com:8021",
          "http://www.region3.com:8021",
          "http://www.region4.com:8021"
      ],
      "nonRegionUrls": [
          "http://www.non-region1.com:8021",
          "http://www.non-region2.com:8021",
          "http://www.non-region3.com:8021",
          "http://www.non-region4.com:8021"
      ]
  }
  </code></pre>
  
  <p>-- Type error simple example wit switchMap ----</p>
  
  <p>cart.component.ts</p>
  
  <pre><code>ngOnInit() {
      this.systemPreferences.getPreferences()
          .pipe(
              .switchMap((result: any) =&gt; {
  
                 this.systemPreferences.getLiveUrl(result['regionUrls']);
  
              }))
          .subscribe(
              (result: any) =&gt; {
                  this.liveLink = result.liveLink; // result.livelink is added as part of this.systemPreferences.getLiveUrl above
                  this.headerTitle = result.title || '';
              },
              (err) =&gt; {
                  console.log('there has been an error');
              }
          );
  }
  </code></pre>
  
  <p>systemPreferences.service.ts:</p>
  
  <pre><code>const CACHE_SIZE = 1;
  
  export class SystemPreferences {
      private $cache: Observable&lt;Object&gt;
  
      private requestConfig() {
           return this.http.get("/api/some/endpoint").pipe(
               map(response =&gt; response.value)
           );
      }
  
      public getPreferences() {
          if (!this.cache$) {
              this.cache$ = this.requestConfig().pipe(
               shareReplay(CACHE_SIZE)
              );
          }
  
          return this.cache$;
      }
  
      public getLiveUrl(urls: any) {
          let promises = [];
  
          urls.forEach((url) =&gt; {
             promises.push(this.http.get(url + 'some/endpoint/')); 
          });
  
          const results = forkJoin(promises) {
              .subscribe((data: any) =&gt; {
                  return this.getBest(data);
              }
          }
      }
  
      public getBest(data: any) {
          // Loops through data, and returns a single URL as a string
          // 'http//www.thebesturltouse.com'
      }
  }
  </code></pre>
  
  <hr>
  
  <p>Update:</p>
  
  <p>Trying to return a second observable as suggested, see below, has the same type void error as above.</p>
  
  <p>cart.component.ts</p>
  
  <pre><code>ngOnInit() {
      this.systemPreferences.getPreferences()
          .pipe(
              .switchMap((result: any) =&gt; {
                 return this.systemPreferences.getLiveUrl(result['regionUrls']);
              }))
          .subscribe(
              (result: any) =&gt; {
                  this.liveLink = result.liveLink; // result.livelink is added as part of this.systemPreferences.getLiveUrl above
                  this.headerTitle = result.title || '';
              },
              (err) =&gt; {
                  console.log('there has been an error');
              }
          );
  }
  </code></pre>
  
  <p>systemPreferences.service.ts:</p>
  
  <pre><code>const CACHE_SIZE = 1;
  
  export class SystemPreferences {
      private $cache: Observable&lt;Object&gt;
      private $switchObs: Observable&lt;Object&gt; 
  
      private requestConfig() {
           return this.http.get("/api/some/endpoint").pipe(
               map(response =&gt; response.value)
           );
      }
  
      public getPreferences() {
          if (!this.cache$) {
              this.cache$ = this.requestConfig().pipe(
               shareReplay(CACHE_SIZE)
              );
          }
  
          return this.cache$;
      }
  
      public getLiveUrl(urls: any) {
          let promises = [];
  
          urls.forEach((url) =&gt; {
             promises.push(this.http.get(url + 'some/endpoint/')); 
          });
  
          const results = forkJoin(promises) {
              .subscribe((data: any) =&gt; {
                  this.$switchObs = this.getBest(data);
                  return this.$switchObs;
              }
          }
      }
  
      public getBest(data: any) {
          // Loops through data, and returns a single URL as a string
          // 'http//www.thebesturltouse.com'
      }
  }
  </code></pre>
  
  <hr>
  
  <p>Update to multiple switchMaps</p>
  
  <p>cart.component.ts</p>
  
  <pre><code>ngOnInit() {
      this.systemPreferences.getPreferences()
          .pipe(
              .switchMap((result: any) =&gt; {
                 return this.systemPreferences.getLiveUrl(result['regionUrls']);
              }),
              .switchMap((liveRegion: any) =&gt; {
                 return this.systemPreferences.getBest(liveRegion);
              }))
          .subscribe(
              (bestUrl: String) =&gt; {
                  console.log('best');
                  console.log(bestUrl);
              },
              (err) =&gt; {
                  console.log('there has been an error');
              }
          );
  }
  </code></pre>
  
  <p>systemPreferences.service.ts:</p>
  
  <pre><code>const CACHE_SIZE = 1;
  
  export class SystemPreferences {
      private $cache: Observable&lt;Object&gt;
      private $switchObs: Observable&lt;String&gt; 
  
      private requestConfig() {
           return this.http.get("/api/some/endpoint").pipe(
               map(response =&gt; response.value)
           );
      }
  
      public getPreferences() {
          if (!this.cache$) {
              this.cache$ = this.requestConfig().pipe(
               shareReplay(CACHE_SIZE)
              );
          }
  
          return this.cache$;
      }
  
      public getLiveUrl(urls: any) {
          let promises = [];
  
          urls.forEach((url) =&gt; {
             promises.push(this.http.get(url + 'some/endpoint/')); 
          });
  
          return forkJoin(promises);
      }
  
      public getBest(data: any) {
          // Loops through data, and returns a single URL as a string
          // 
          return this.$switchObs; // = 'http//www.thebesturltouse.com'
      }
  }
  </code></pre>
  
  <p>With the above, on the console.log('best')/console.log(bestUrl), i see:</p>
  
  <pre><code>'best'
  h
  'best'
  t
  'best'
  t
  'best'
  p
  'best'
  :
  'best'
  /
  'best'
  /
  'best'
  w
  'best'
  w
  'best'
  w
  'best'
  .
  'best'
  b
  etc etc etc
  </code></pre>
  
  <p>Rather than just the string http//www.thebesturltouse.com</p>
  
  <hr>
  
  <p>Update.</p>
  
  <p>Within the multi switchMap example, if i return Obserbable.of(this.$switchObs); i get the expected single string URL.</p>
  
  <p>This doesnt feel like the best way to solve this.</p>