Ngx-bootstrap: No Provider for DropdownConfig!

[paweloque]

I've upgraded angular-cli and the angular framework to the following versions:

angular-cli: 1.0.0-beta.22-1
node: 7.1.0
os: darwin x64

And angular:

"@angular/core": "2.2.3"

And now I'm getting the following error when opening a component with a dropdown directive:

error_handler.js:47 EXCEPTION: Uncaught (in promise): Error: Error in ./EventFormComponent class EventFormComponent - inline template:4:12 caused by: No provider for DropdownConfig!
Error: No provider for DropdownConfig!
    at NoProviderError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:8546:34)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/vendor.bundle.js:65505:16)
    at new NoProviderError (http://localhost:4200/vendor.bundle.js:65536:16)
    at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:87212:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:87240:25)
    at ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:87203:25)
    at ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:87012:21)
    at AppModuleInjector.NgModuleInjector.get (http://localhost:4200/vendor.bundle.js:66207:52)
    at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:4200/vendor.bundle.js:87754:45)
    at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:4200/vendor.bundle.js:87996:49)

Do I have to configure ng-bootstrap in addition to importing its modules?

[a5hik]

You need to import the modules now with forRoot().

[manuelfink]

@a5hik not getting it to work, can you give an example for this?
do I have to import it into the main app.module? with ng-bootstrap.forRoot()? or how you mean it?

[Martin-Wegner]

@manuelfink DropdownModule.forRoot()

[Martin-Wegner]

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DropdownModule } from 'ng2-bootstrap';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppRoutingModule,
    BrowserModule,
    DropdownModule.forRoot()
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

[XidongHuang]

@Martin-Wegner Hi, I updated to 1.1.16-7 and change to module configuration like yours, but it still keep throwing "No Provider for DatepickerModule".
My app.module.ts:

import { ChartsModule} from '../node_modules/ng2-charts/ng2-charts';
import { SelectModule } from 'ng2-select';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';

import { AppComponent }   from './app.component';
import { BarChartComponent } from './components/bar.chart.component';

import { DatePickerComponent } from './components/datepicker_component/datepicker.component';

@NgModule({
  imports:    [ BrowserModule,HttpModule, ChartsModule, 
                SelectModule, Ng2BootstrapModule, 
                DatepickerModule.forRoot()],
  .......
})
export class AppModule { }

[Martin-Wegner]

I think you should not import the whole Ng2BootstrapModule.
Please use ng2-bootstrap instead of ng2-bootstrap/ng2-bootstrap.
ng2-bootstrap has no components directory anymore.

[XidongHuang]

@Martin-Wegner Thanks for quick replying!

But it still throws the same error. Does is just mean the configuration path wrong?

I think you are talking the ng2-bootstrap where is in app.module.ts, right? Because there is a configuration in systemjs.config.js too.

I deleted Ng2BootstrapModule and changed the app.module.ts to:

import { DatepickerModule } from 'ng2-bootstrap';
  ........
@NgModule({
  imports:    [ BrowserModule,HttpModule, ChartsModule, 
                SelectModule, DatepickerModule.forRoot()],
  .......
})
export class AppModule { }

And my html is:

<div style="display:inline-block">
        <datepicker [(ngModel)]="dt" [minDate]="minDate" 
            [showWeeks]="false"></datepicker>

</div>

And the other files in the components folder is my components, that path doesn't point to ng2-bootstrap.

[Martin-Wegner]

@XidongHuang did you miss to import the FormsModule?

[XidongHuang]

@Martin-Wegner It is working now! Thanks for your time!

[JVerwolf]

Try:

imports: [
    Ng2BootstrapModule.forRoot()
],

This is what solved the issue for me

[Vnuuk]

@JVerwolf solved my problem as well!

[imalhasaranga]

You may still have some declarations of n2bootstrap , you need to remove them and add Ng2BootstrapModule.forRoot()

example remove
declarations: [ CollapseDirective, SlideComponent, CarouselComponent, SlideComponent ]

instead add

imports: [ Ng2BootstrapModule.forRoot() ],

[NikhilRadadiya]

I'm getting No provider for NgbActiveModal! when I use NgbActiveModal.
I've already added NgbModule.forRoot(), in my app.module.ts