angular - すべてのテンプレートをオーバーライドする angular 2 コンポーネント

Question

ng2-smart-tableそのようなHTMLページ内にコンポーネントを追加する以下のモジュールがあります:

  <div class="row">
    <div class="col-md-6">
      <ba-card title="Commandes" baCardClass="with-scroll">
        <bar-table></bar-table>
      </ba-card>
    </div>
  </div>
    <div class="row">
      TEST HERE
    </div>

問題は、コード TEST HERE がモジュールによってオーバーライドされ、通常は表示されるバーテーブルしかなく、その下には何もないことです。

//app/pages/foo/detailFoo/detailFoo.module.ts

NgModule({
  imports: [
    CommonModule,
    NgaModule,
    Ng2SmartTableModule,
    BarModule,
    DetailFooRouting
  ],
  declarations: [
    DetailFoo
  ],
  exports: [
    DetailFoo
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export default class DetailFooModule {}

とコンポーネント

//app/pages/foo/detailFoo/detailFoo.component.ts

@Component({
  selector: 'foo-detail',
  template: require('./detailFoo.html'),
})
export class DetailFoo {

  constructor() {
  }
}

私はそのように参照されているコンポーネントのバーテーブルを呼び出します:

//app/pages/bar/bar.module.ts

@NgModule({
  imports: [
    CommonModule,
    NgaModule,
    Ng2SmartTableModule,
    routing
  ],
  declarations: [
    BarTableComponent
  ],
  exports: [BarTableComponent]
})
export class BarModule {}

//app/pages/bar/barTable.component.ts

@Component({
  selector: 'bar-table',
  template: '<ng2-smart-table [settings]="settings" (deleteConfirm)="onDeleteConfirm($event)"></ng2-smart-table>'
})
export class BarTableComponent

TEST HERE が表示されない理由を誰かが知っていますか?