Q:

Angular 8 app produces runtime error in console related to ng-bootstrap

I have an Angular 8 app that's been happily using ng-bootstrap.  After implementation of ng-bootstrap in my dashboard lazy module, I'm facing a problem which is I'm unable to use Dropdown Component.  
Can someone help me to find out how this problem will solve? 
Re-Edit
Now, I've below folder structure:

and by following This example.  I've created a new folder named dropdown. 
Here is my dashboard.component.html:
<div class="d-flex">
    <div class="p-2 flex-grow-1">
        <h4>
          Dashboard
          <span class="badge badge-light">Transactions</span>
        </h4>
    </div>
    <div class="p-2">
        <ngbd-dropdown-basic></ngbd-dropdown-basic>
    </div>
</div>

dashboard.module.ts:
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './components/dashboard.component';
import { NgbdDropdownBasicModule } from '../dropdown/dropdown-basic.module';

const routes: Routes = [
    { path: '', component: DashboardComponent }
];

@NgModule({
    imports: [CommonModule, NgbdDropdownBasicModule,                                                                     RouterModule.forChild(routes)],
    exports: [RouterModule],
    providers: [NgbdDropdownBasicModule ]
})
export class DashboardModule { }

dropdown-basic.html:
<div ngbDropdown class="dropdown">
  <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
  </button>
  <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

dropdown-basic.ts:
import { Component } from '@angular/core';

@Component({
    selector: 'ngbd-dropdown-basic',
    templateUrl: './dropdown-basic.html'
})
export class NgbdDropdownBasic {}

dropdown-basic.module.ts:
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { NgbdDropdownBasic } from './dropdown-basic';

@NgModule({
    imports: [NgbModule],
    declarations: [NgbdDropdownBasic],
    exports: [NgbdDropdownBasic],
    bootstrap: [NgbdDropdownBasic]
})
export class NgbdDropdownBasicModule { }

Now, the current issue is my ngbd-dropdown-basic loaded successfully, but not showing it's content. 

What I'm doing wrong please let me know. :( 

A:

Finally achieved my goal by
removing:
providers: [NgbdDropdownBasicModule ]
and adding
declarations: [DashboardComponent] in my dashboard.module.ts file.  
Appreciate time and efforts of other developers on my post. 