Angular 6 Передача массива injectables поставщикам в app.module.ts вызывает: «Ошибка в Не удается прочитать свойство« длина »неопределенного»

Question

У меня есть следующий массив с инъекционными , которые связаны с службами :

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 }
];

И я пытаюсь передать его провайдерам в 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 { }

Однако я получаю "ОШИБКА в Не могу прочитать свойство" длина "из неопределенного" (только одна строка, больше ничего).

Я полагаю, что причина, скорее всего, связана с версией Angular.Я использую 6, и проект книги написан в версии 5. Тем не менее, документация Angular по Dependency Injection говорит, что книжный путь - верный путь ... Так что я немного запутался.Или, может быть, я просто что-то упускаю.

Я на самом деле пытался вручную добавить каждый инъекционный файл в app.module, но получил ту же ошибку.

Любая помощь будет оценена

РЕДАКТИРОВАТЬ : пробовал "условии In: 'root'," в соответствии с обновлением ng6, но это не помогло.

На всякий случай - класс инъекций:

/*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
  }
}

Answer 1

Я вижу две проблемы с вашим кодом.Во-первых, вы используете массив внутри массива для определения ваших провайдеров.Либо ссылайтесь на переменную youTubeSearchInjectables прямо, либо используйте оператор распространения для объединения ваших экспортированных поставщиков в массив поставщиков по модулю.

Вторая проблема, которую вы не заметите, пока первая проблема не будет решена, заключается в том, чтовы должны использовать useValue вместо useClass для YOUTUBE_API_KEY и YOUTUBE_API_URL, так как эти два не классы, а простые строковые значения.

const youTubeSearchInjectables: Array<any> = [
  { provide: YouTubeSearchService, useClass: YouTubeSearchService },
  { provide: YOUTUBE_API_KEY, useValue: YOUTUBE_API_KEY },
  { provide: YOUTUBE_API_URL, useValue: YOUTUBE_API_URL }
];

@NgModule({
  providers: [
    ...youTubeSearchInjectables
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }