I'm currently attempting to inject a SpotifyService service into a SearchComponent component, where the service requires Http as a parameter.
Below is my module setup:
@NgModule({
imports: [ BrowserModule, FormsModule, RouterModule ],
declarations: [ AppComponent, SearchComponent, ArtistComponent, AlbumComponent, TrackComponent ],
bootstrap: [ AppComponent ],
providers: [{
provide:SpotifyService,
deps: [Http], useFactory(http:Http){
return new SpotifyService(http);
}}]
})
export class AppModule { }
and this is the structure of the service:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { from, Observable, throwError } from 'rxjs';
import { map, filter, catchError, mergeMap } from 'rxjs/operators';
@Injectable()
export class SpotifyService {
constructor(public http: Http) { }
searchTrack(query:string){
let params:string = [
`q=${query}`,
`type=track`
].join("&");
let queryUrl:string = `https://api.spotify.com/v1/search?${params}`;
return this.http.request(queryUrl).
pipe(map((e)=> e.json()),
catchError((e:Response)=> throwError(e)));
}
}
Here is the definition of the Search component:
export class SearchComponent implements OnInit {
query:string;
results: Object;
constructor(private spotify: SpotifyService,
private router: Router,
private route: ActivatedRoute) {
this.route.queryParams.subscribe(params=>{
this.query = params["query"] || "";
});
}
}//etc...
However, when running the application, I encounter a blank screen with the error
Error: StaticInjectorError(AppModule)You can view the StackBlitz example here: https://stackblitz.com/edit/angular-spotify-ngbook