ng2-bootstrap - No provider for TimepickerConfig when imported into a separate module

Question

I am using ng2-bootstrap v1.2.5.

In my app I load two Timepicker components into a parent component using @ViewChild. I originally did this by declaring the ExampleComponent directly in the AppModule. This approach worked fine.

I now want to move ExampleComponent into its own module (ExampleModule). While the module is new, there are no code changes in the ExampleComponent. However, when Timepicker is imported into ExampleComponent I now get a "No provider for TimepickerConfig!" error.

Here is the pseudo-code:

/**
 * AppModule
 */
@NgModule({
    bootstrap: [ AppComponent ],
    declaration: [ AppComponent ],
    imports: [ 
        BrowserModule,
        Ng2BootstrapModule,
        ExampleModule,
        ... etc.
    ]
})
export class AppModule {}


/**
 * ExampleModule
 */
@NgModule({
    declarations: [ ExampleComponent ],
    imports: [
        CommonModule,
        Ng2Bootstrap,
        ... etc.
    ],
    exports: [ ExampleComponent ]
})
export class ExampleModule {}


/**
 * ExampleComponent
 */
import {Component, ViewChild} from '@angular/core';
import {TimepickerComponent} from 'ng2-bootstrap/timepicker';

export class ExampleComponent {
    @ViewChild('startTimepicker') startTimepicker: TimepickerComponent;
    @ViewChild('endTimepicker') endTimepicker: TimepickerComponent;

    ... etc.
}

What is causing the new importing error?

Answer 1

I figured out the problem. In addition to Raul's suggestion of importing TimepickerModule instead of just the component, the TimpickerConfig class needs to be explicitly provided, i.e. imported and added to the provider list.

Pseudo-code:

import {TimepickerModule, TimepickerConfig} from 'ng2-bootstrap/timepicker';

@NgModule({
    declarations: [ ExampleComponent ],
    imports: [
        CommonModule,
        TimepickerModule,
        ... etc.
    ],
    exports: [ ExampleComponent ],
    providers: [ TimepickerConfig ]
})
export class ExampleModule {}