ng-select в приложении Angular 8 - Ошибка выполнения, связанная с NgSelectComponent

Я пытаюсь использовать ng-select в своем приложении Angular 8. Я получаю сообщение об ошибке выполнения:

core.js:6249 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[NgSelectComponent -> NgSelectConfig]: 
  StaticInjectorError(Platform: core)[NgSelectComponent -> NgSelectConfig]: 
    NullInjectorError: No provider for NgSelectConfig!
NullInjectorError: StaticInjectorError(AppModule)[NgSelectComponent -> NgSelectConfig]: 
  StaticInjectorError(Platform: core)[NgSelectComponent -> NgSelectConfig]: 
    NullInjectorError: No provider for NgSelectConfig!

Вот что я сделал:

  1. Установлен ng-select с помощью npm install --save @ ng-select / ng-select
  2. включил это в мой app.module.ts
import { NgSelectModule } from '@ng-select/ng-select';

И я включил NgSelectModule в импорт. 3) В моем компоненте я добавил:

<ng-select [items]="xyz"
         bindValue="XyzID"
         bindLabel="Description"
         [multiple]="false"
         placeholder="Select Xyz"
         searchable="true"
         clearable="true"
     formControlName="xyz">
 </ng-select>
  1. В component.ts xyz существует как массив объектов (Description и XyzID являются свойствами объектов). Я добавил:
import { NgSelectModule } from '@ng-select/ng-select';
  1. В index.html я добавил тему
 <link href="node_modules/@ng-select/ng-select/themes/default.theme.css rel="stylesheet">

Использую реактивные формы.

  1. Посмотрев сообщение об ошибке, я попытался загрузить NgSelectConfig - хотя в примерах, которые я видел в Интернете для ng-select, я не нашел ничего, что делало бы это. Затем у меня возникла ошибка при поиске зависимости - ConsoleService, которая существует в @ ng-select / ng-select / esm5 / lib / console.service. Я попытался явно импортировать это, но все равно получил ошибки.

Спасибо за любую помощь в этом вопросе.


angular angular-ngselect
person user2026318    schedule 09.07.2020    source источник
comment
@NgModule ({объявления: [AppComponent], импорт: [NgSelectModule], bootstrap: [AppComponent]}) вы сделали это в модуле приложения?   -  person Abu Sufian    schedule 09.07.2020
comment
Не уверен в этой конкретной ошибке, но ваш css на шаге 4 выйдет из строя в производственной сборке .. это нужно сделать внутри angular.json ..   -  person MikeOne    schedule 09.07.2020
comment
@AbuSufian, спасибо, да, я это сделал.   -  person user2026318    schedule 10.07.2020
comment
@MikeOne, спасибо, я просто пытаюсь заставить его работать в разработке, но сделаю пометку, чтобы сделать это для производства.   -  person user2026318    schedule 10.07.2020

Ответы (3)


arrow_upward
2
arrow_downward

Я понял. Мне пришлось включить ConsoleService, который ng-select экспортирует как es

Итак, в моем app.module.ts мне пришлось добавить:

импортировать {NgSelectConfig} из '@ ng-select / ng-select'; импортировать {ɵs} из '@ ng-select / ng-select';

А в провайдерах я добавил: NgSelectConfig и es

Надеюсь, это поможет кому-то еще с той же проблемой.

person user2026318    schedule 13.07.2020

arrow_upward
1
arrow_downward

Убедитесь, что вы установили правильную версию ng-select. Пожалуйста, проверьте package.json в соответствии с документами https://github.com/ng-select/ng-select#versions

Версии

введите описание изображения здесь

Просто измените свой package.json с @ ng-select / ng-select: ^ 4.0.0 на @ ng-select / ng-select: ^ 3.0.0. Он должен работать! ссылка https://github.com/ng-select/ng-select/issues/1602#issuecomment-625420381

person Saurabh47g    schedule 08.12.2020

arrow_upward
0
arrow_downward

в app.module.ts,

импортировать {NgSelectConfig} из '@ ng-select / ng-select'; импортировать {ɵs} из '@ ng-select / ng-select';

провайдеры: [NgSelectConfig, ɵs],

person Vikas Rao    schedule 05.07.2021