I encountered a perplexing issue while attempting to call a service function within the subscribe() method of another service function call. The error message indicated a TypeError:
TypeError: _this.fileloaderService.downloadFile is not a function
I have two services in place, one for fetching episodes and the other for loading file contents. Both are imported and included in the EpisodesComponent constructor as shown below:
import { EpisodeService } from '../episode.service';
import { FileloaderService } from '../fileloader.service';
constructor(private episodeService: EpisodeService,
private fileloaderService: FileloaderService) { }
After retrieving the episodes, I attempted to load a file from a URL mentioned in each episode object:
getEpisodes(): void {
this.episodeService.getEpisodes().subscribe(episodes => {
this.episodes = episodes;
for (let i of this.episodes) {
this.fileloaderService.downloadFile(i.fileUrl).subscribe(file => {
i['file'] = file;
});
}
});
}
Despite having defined the downloadFile() method in the service, an error was raised in the console suggesting that the method does not exist or is not instantiated. Both services were configured identically.
Any insights would be greatly appreciated! (I'm still learning Typescript so please bear with me!) Thank you...
EDIT 1: Running ng serve --open, I added:
console.log("fileloaderService:" + JSON.stringify(this.fileloaderService));
within the getEpisodes().subscribe() function, which resulted in the following output:
fileloaderService: {}
EDIT 2: I also included the service in app.module.ts providers like so:
providers: [EpisodeService, FileloaderService],
EDIT 3: A simplified version of the app can be viewed on StackBlitz here:
https://stackblitz.com/edit/angular-sazw43
Currently facing issues with the in-memory-web-api setup but all relevant details should be accessible (I hope).