twitter-bootstrap - ng2-bootsrap にはエクスポートされたメンバー「TAB_DIRECTIVES」がありません

Question

私は、ui のタブを使用する必要がある angular2 i に取り組んでいます。そのために、プラグインhttp://valor-software.github.io/ng2-bootstrap/を使用しようとしています

私はdemoComponentを次のように書きました

    import { Component, View, Inject} from 'angular2/core';
    import { CORE_DIRECTIVES } from 'angular2/common';
    import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

    // webpack html imports
    let template = require('./tabs-demo.html');

    @Component({
      selector: 'tabs-demo',
      template: template,
      directives: [TAB_DIRECTIVES, CORE_DIRECTIVES]
    })
    export class TabsDemo {
      private tabs:Array<any> = [
        {title: 'Dynamic Title 1', content: 'Dynamic content 1'},
        {title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true}
      ];

      private alertMe() {
        setTimeout(function () {
          alert('You\'ve selected the alert tab!');
        });
      };
    }

ここに私のテンプレートがあります

<div (click)="$event.preventDefault()">
  <p>Select a tab by setting active binding to true:</p>
  <p>
    <button type="button" class="btn btn-primary btn-sm" (click)="tabs[0].active = true">Select second tab</button>
    <button type="button" class="btn btn-primary btn-sm" (click)="tabs[1].active = true">Select third tab</button>
  </p>
  <p>
    <button type="button" class="btn btn-primary btn-sm" (click)="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
  </p>
  <hr />
  <tabset>
    <tab heading="Static title">Static content</tab>
    <tab *ngFor="#tabz of tabs"
         [heading]="tabz.title"
         [active]="tabz.active"
         (select)="tabz.active = true"
         (deselect)="tabz.active = false"
         [disabled]="tabz.disabled">

    </tab>
    <tab (select)="alertMe()">
      <template tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </template>
      I've got an HTML heading, and a select callback. Pretty cool!
    </tab>
  </tabset>

  <hr />

  <tabset [vertical]="true" type="pills">
    <tab heading="Vertical 1">Vertical content 1</tab>
    <tab heading="Vertical 2">Vertical content 2</tab>
  </tabset>

  <hr />

  <p><i>Bootstrap 4 doesn't have justified classes</i></p>
  <tabset [justified]="true">
    <tab heading="Justified">Justified content</tab>
    <tab heading="SJ">Short Labeled Justified content</tab>
    <tab heading="Long Justified">Long Labeled Justified content</tab>
  </tabset>
</div>

しかし、それをgulpコンパイルすると、エラーが発生します

正しく実行するように修正してください。