angular 2 component that overrides all template

Question

I have the module below that is adding a ng2-smart-table component inside my html page like that:

  <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>

The issue is that the code TEST HERE is overriden by the module, and I have only my bar-table that is normally displayed but nothing below it.

//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 {}

and the component

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

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

  constructor() {
  }
}

I call my component bar-table which is referenced like that :

//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

Does someone know why TEST HERE isnt displayed?

Answer 1

It seems to be a dependency issue with ng2-smart-table and the new angular version. Waiting for an update of the module to fix this.