Angular 17.3.5: ERROR NullInjectorError: R3InjectorError(AppModule)[NgbDropdown -> NgbDropdown]: NullInjectorError: No provider for NgbDropdown

Question

When I use angular 15, everything is fine.

When I upgrade angular to 17.3.5, and the latest bootstrap, the following error occurs. Please help me!

ERROR NullInjectorError: R3InjectorError(AppModule)[NgbDropdown -> NgbDropdown]:
NullInjectorError: No provider for NgbDropdown!
at NullInjector.get (core.mjs:1654:27)
at R3Injector.get (core.mjs:3093:33)
at R3Injector.get (core.mjs:3093:33)
at ChainedInjector.get (core.mjs:15723:36)
at lookupTokenUsingModuleInjector (core.mjs:5730:39)
at getOrCreateInjectable (core.mjs:5778:12)
at ɵɵdirectiveInject (core.mjs:11050:19)
at ɵɵinject (core.mjs:1106:60)
at inject (core.mjs:1192:12)
at new NgbDropdownAnchor (ng-bootstrap.mjs:6290:31)

Here my html:

<div ngbDropdown>
 <i class="fa-regular fa-file-lines fa-xl"></i>
 <a class="menumain btn" ngbDropdownToggle>{{ 'menu.text' | transloco }}</a>
 <div ngbDropdownMenu aria-labelledby="dropdownText">
   <a ngbDropdownItem routerLink="comparetext" routerLinkActive="router-link-active">{{ 'text.compareText.title' | transloco }}</a>
   <a ngbDropdownItem routerLink="texttohex" routerLinkActive="router-link-active">{{ 'text.textToHex.title' | transloco }}</a>
   <a ngbDropdownItem routerLink="texttobase64" routerLinkActive="router-link-active">{{ 'text.textToBase64.title' | transloco }}</a>
 </div>
</div>

My app.modules.app:

import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
imports: [  NgbDropdownModule ...]
providers: [ NgbDropdown ...]
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],

version:

"@angular/animations": "^17.3.5",
"@angular/cdk": "^17.3.5",
"@angular/common": "^17.3.5",
"@angular/compiler": "^17.3.5",
"@angular/core": "^17.3.5",
"@angular/forms": "^17.3.5",
"@angular/localize": "^17.3.5",
"@angular/material": "^17.3.5",
"@angular/platform-browser": "^17.3.5",
"@angular/platform-browser-dynamic": "^17.3.5",
"@angular/platform-server": "^@angular/platform-server",
"@angular/router": "^@angular/platform-server",
"@ng-bootstrap/ng-bootstrap": "^16.0.0",

My issue in github here: https://github.com/ng-bootstrap/ng-bootstrap/issues/4691