angularangular-ngselect

ng-select in Angular 8 application - Runtime Error related to NgSelectComponent


I'm trying to use ng-select in my Angular 8 application. I'm getting a runtime error:

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!

Here's what I did:

  1. Installed ng-select using npm install --save @ng-select/ng-select
  2. included this in my app.module.ts
import { NgSelectModule } from '@ng-select/ng-select';

And I included NgSelectModule in the imports 3) In my component, I added:

<ng-select [items]="xyz"
         bindValue="XyzID"
         bindLabel="Description"
         [multiple]="false"
         placeholder="Select Xyz"
         searchable="true"
         clearable="true"
     formControlName="xyz">
 </ng-select>
  1. In component.ts, xyz exists as an array of objects (Description and XyzID are properties of the objects) I added:
import { NgSelectModule } from '@ng-select/ng-select';
  1. In index.html I added a theme
 <link href="node_modules/@ng-select/ng-select/themes/default.theme.css rel="stylesheet">

I am using reactive forms.

  1. After looking at the error message, I tried pulling in NgSelectConfig - although in the examples I saw online for ng-select, I didn't find any that were doing that. Then I got an error looking for a dependency - ConsoleService, which exists in @ng-select/ng-select/esm5/lib/console.service. I tried to explicitly import that, but still got errors.

Thank you for any help on this.


Solution

  • in app.module.ts

    import { NgSelectConfig } from '@ng-select/ng-select';
    import { ɵs } from '@ng-select/ng-select';
    

    and then in providers Array

    providers: [NgSelectConfig, ɵs],