Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error: No provider for NgbDropdown! with v1.0.0-beta.5

See original GitHub issue

No provider for NgbDropdown for v1.0.0-beta.5

I’m using ng-bootstrap inside my project for modals and other components alongside with bootstrap 4 ( only for styling ).

When I run ‘ng start’ I get the following error:

ERROR Error: Uncaught (in promise): Error: No provider for NgbDropdown!
Error: No provider for NgbDropdown!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9489)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10577)
    at resolveDep (core.es5.js:11080)
    at createClass (core.es5.js:10939)
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9489)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10577)
    at resolveDep (core.es5.js:11080)
    at createClass (core.es5.js:10939)
    at resolvePromise (zone.js:795)
    at resolvePromise (zone.js:766)
    at zone.js:844
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at <anonymous>

Version of project dependencies

Angular: 4.4.3
ng-bootstrap: 1.0.0-beta.5
Bootstrap: 4.0.0-beta

Runtime Environment:

OS: linux
node: 8.5

Main module configuration:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    NgbModule.forRoot()
  ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

To be able to use it I’ve added NgbDropdown to the list of the providers.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    NgbModule.forRoot()
  ],
  providers: [NgbDropdown],
  bootstrap: [AppComponent]
})

Question:

Is this expected? Is it ok to set the component as an element of providers array?

Thank you

Issue Analytics

State:
Created 6 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

27reactions

807811b0-1373-11e5-b60b-1697f925ec7bcommented, Dec 1, 2017

I had the same issue and it was because I was nesting the components wrong. You cannot have NgbDropdownMenu or NgbDropdownToggle component without a parent NgbDropdown component.

0reactions

menesscommented, May 28, 2019

Make sure you have not exported the module. NgbDropdownModule should not be exported but imported. Hope this helps.

Top Results From Across the Web

Error: No provider for NgbDropdown! with v1.0.0-beta.5

No provider for NgbDropdown for v1.0.0-beta.5. I'm using ng-bootstrap inside my project for modals and other components alongside with ...

No provider for NgbDropdown with Angular Bootstrap

I am attempting to use the NbgDropdown in an app and I get the following error: NullInjectorError: No provider ...

ngbdropdown module的推薦與評價，網紅們這樣回答

ngbdropdown module 在No provider for NgbDropdown! with v1.0.0-beta.5 - ng-bootstrap 的相關 ... How to fix “Error: StaticInjectorError(AppModule)[NgbDropdown ...

Dropdown - Angular powered Bootstrap

A directive that provides contextual overlays for displaying lists of links and more. Selector: '[ngbDropdown]'. Exported as: 'ngbDropdown'. Inputs ...

No provider for NgbDropdown with Angular Bootstrap

Make sure your HTML markup has the wrong idea ngbDropdown attribute on use of case ngbDropdownToggle and ngbDropdownMenu United parent. <div ngbDropdown> <!...