Below is an array containing injectables connected to services:
import { YouTubeSearchService,
YOUTUBE_API_KEY,
YOUTUBE_API_URL } from './you-tube.service';
export const youTubeSearchInjectables: Array<any> = [
{ provide: YouTubeSearchService, useClass: YouTubeSearchService },
{ provide: YOUTUBE_API_KEY, useClass: YOUTUBE_API_KEY },
{ provide: YOUTUBE_API_URL, useClass: YOUTUBE_API_URL }
];
I am attempting to pass this array to providers in my app.module.ts:
/*other imports*/
import { youTubeSearchInjectables } from './search-result/you-tube-search.injectables';
@NgModule({
declarations: [
AppComponent,
SimpleHttpComponent,
SearchResultComponent,
SearchBoxComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
providers: [youTubeSearchInjectables],
bootstrap: [AppComponent]
})
export class AppModule { }
However, I encountered an error message stating "ERROR in Cannot read property 'length' of undefined". Just a single line error.
I suspect the issue might be related to Angular versions. The project uses version 5 while I am on version 6. Though according to Angular documentation, the book-way should work. This has left me puzzled. Perhaps there's something I'm overlooking.
I even tried manually adding each injectable to app.module but faced the same error.
Your assistance would be greatly appreciated.
EDIT: I also attempted using "providedIn: 'root'," as per ng6 update guidelines, but it did not resolve the issue.
Just for reference, here is the Injectable class:
/*imports*/
export const YOUTUBE_API_KEY = 'keykeykey';
export const YOUTUBE_API_URL = 'https://www.googleapis.com/youtube/v3/search';
@Injectable({
providedIn: 'root',
})
export class YouTubeSearchService {
constructor(
private http: HttpClient,
@Inject(YOUTUBE_API_KEY) private apiKey: string,
@Inject(YOUTUBE_API_URL) private apiUrl: string
) { }
search(query: string): Observable<SearchResult[]> {
// logic
}
}