CODEWITHSUNDEEP
angularangular-ngselect
user2026318
user2026318

Reputation: 194

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.

Upvotes: 1

Views: 4246

Answers (4)

Vikas Rao
Vikas Rao

Reputation: 26

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],

Upvotes: 0

Abolfazl Roshanzamir
Abolfazl Roshanzamir

Reputation: 14872

Add NgSelectModule in AppModule

import { NgSelectModule } from '@ng-select/ng-select';

As follows

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    NgSelectModule, // This line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 0

Saurabh Gangamwar
Saurabh Gangamwar

Reputation: 802

Make sure that you have installed right version of ng-select. Please check package.json as per the docs https://github.com/ng-select/ng-select#versions

Versions

enter image description here

Just change your package.json from "@ng-select/ng-select": "^4.0.0" to "@ng-select/ng-select": "^3.0.0". It should work! reference https://github.com/ng-select/ng-select/issues/1602#issuecomment-625420381

Upvotes: 1

user2026318
user2026318

Reputation: 194

I figured it out. I had to include ConsoleService, which ng-select exports as "es"

So, in my app.module.ts, I had to add:

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

And in providers, I added: NgSelectConfig and es

Hope it helps someone else with the same problem.

Upvotes: 2

Related Questions