title: TypeError: _this. is not a function
body: <p>I am getting a strange error when I try and call a service function from within the subscribe() method of another service function call. The TypeError states:</p>
  
  <pre><code>TypeError: _this.fileloaderService.downloadFile is not a function
  </code></pre>
  
  <p>I have two services, one to get some episodes, and another to load the contents of a file. I import them both and include them in my EpisodesComponent constructor like so:</p>
  
  <pre><code>import { EpisodeService } from '../episode.service';
  import { FileloaderService } from '../fileloader.service';
  
  constructor(private episodeService: EpisodeService,
    private fileloaderService: FileloaderService) { }
  </code></pre>
  
  <p>Then I get my episodes, and when they are returned I try to load a file from a url that is a field in my episode object:</p>
  
  <pre><code>getEpisodes(): void {
    this.episodeService.getEpisodes().subscribe(episodes =&gt; {
      this.episodes = episodes;
      for (let i of this.episodes) {
        this.fileloaderService.downloadFile(i.fileUrl).subscribe(file =&gt; {
          i['file'] = file;
        });
      }
    });
  }
  </code></pre>
  
  <p>However, in the console when it is run it complains about the downloadFile() method not existing. However it compiles correctly and you can see it does exist 
  in the service below. </p>
  
  <pre><code>@Injectable()
  export class FileloaderService {
  
    constructor(private http: HttpClient) { }
  
    downloadFile(fileUrl): Observable&lt;Text&gt; {
      let options = new RequestOptions({responseType: ResponseContentType.Text});
      return this.http.get(fileUrl, options)
        .catch(this.handleError('downloadFile'));
    }
  </code></pre>
  
  <p>It seems like it is complaining it doesn't exist/isn't instantiated or something, but the way I've created and included the two services is identical.</p>
  
  <p>Any ideas? (I'm completely new to Typescript so please go easy on me!) Thanks in advance...</p>
  
  <p><strong>EDIT 1</strong>: I am running this using ng serve --open
  I have included:</p>
  
  <pre><code>console.log("fileloaderService:" + JSON.stringify(this.fileloaderService));
  </code></pre>
  
  <p>inside the getEpisodes().subscribe() function and it outputs this:</p>
  
  <pre><code>fileloaderService: {}
  </code></pre>
  
  <p><strong>EDIT 2</strong>: I have also added the service to the app.module.ts providers like this:</p>
  
  <pre><code>providers: [EpisodeService, FileloaderService],
  </code></pre>
  
  <p><strong>EDIT 3</strong>: I've created a stackblitz of the app simplified here:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-sazw43" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-sazw43</a></p>
  
  <p>Unfortunately I'm struggling to get the in-memory-web-api stuff to work correctly at the moment but you should be able to see everything as I have it (I think)</p>