cannot use ng select component in my angular application

In my angular application i was trying to use ng-select for showing drop downs. my angular version is 17 and it only supports ng select v12. i use standalone components in my application , when i am trying to import ng-select component and declare it in the import array it shows "

error from '@ng-select/ng-select' The component 'NgSelectComponent' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule..
​

import {NgSelectComponent} from '@ng-select/ng-select';
@Component({
selector: 'app-service-edit',
standalone: true,
imports: [ReactiveFormsModule, HttpClientModule,NgSelectComponent],
templateUrl: './service-edit.component.html',
styleUrl: './service-edit.component.css',
})
export class ServiceEditComponent {
}


and my html component is

<ng-select>
@for (site of sites; track site.id){

<option>{{site.name}}</option>
}
</ng-select>


but my applicaion does not have an app module since i was following angular recommendation to use standalone components. my package.json

"name": "service-report-front",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"@ng-bootstrap/ng-bootstrap": "^16.0.0",
"@ng-select/ng-select": "^12.0.7",
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.2",
"ngx-bootstrap": "^12.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.11",
"@angular/cli": "^17.3.11",
"@angular/compiler-cli": "^17.3.0",
"@angular/localize": "^17.3.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.2"
}
}

Continue reading...