No provider for NbAccordionComponent found in NodeInjector

I am trying to use the accordion component from the nebular library in my project, in the doc they said I should just import NbAccordionModule in the NgModule annotation of my Module, and actually it works fine when I put the nb-accordion components and its items at the same component,

<nb-accordion multi>
 <nb-accordion-item *ngFor="let item of collection">
  <nb-accordion-item-header>item.title</nb-accordion-item-header>
  <nb-accordion-item-body>
    item.content
  </nb-accordion-item-body>
 </nb-accordion-item>
</nb-accordion>

But when I tried to move its items to another component and call that component inside the nb-accordion:

   //parent.component.html
   <nb-accordion multi>
       <ng-template ngFor let-item [ngForOf]="collection">
             <child [collectionItem]="item"></child>
       </ng-template>
   </nb-accordion>

   //child.component.html
   <nb-accordion-item>
    <nb-accordion-item-header>collectionItem.title</nb-accordion-item-header>
     <nb-accordion-item-body>
       collectionItem.content
    </nb-accordion-item-body>
   </nb-accordion-item>

It always gives this error message:

//app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ParentComponent } from './parent/parent.component';
import { ChildComponent } from './child/child.component';
import { NbAccordionModule } from '@nebular/theme';

@NgModule({
  declarations: [
    AppComponent,
    ParentComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NbAccordionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }