Angular2 TypeScript Ошибка директивы TS2345

Когда я скомпилирую свое приложение с tsc, я получаю эту ошибку TS2345:

error TS2345: 
Argument of type '{ selector: string; template: string; directives: (typeof Title | any[])[]; providers: typeof Goo...' is not assignable to parameter of type 'ComponentMetadataType'.

И вот мой код:

import { Component, Input } from "@angular/core";
import { Title } from "./components/title";
import { Timeline } from "./components/timeline";

@Component({
  selector: "edu",
  template: `
            <div id="Edu" class="Edu content section scrollspy">
              <title [icon]="titleIcon" [title]="titleTitle"></title>
              <timeline [data]="edu"></timeline>
            </div>
            `,
  directives: [Title, Timeline]
})

export class Edu {
  private titleIcon = "graduation-cap";
  private titleTitle = "Education";
  @Input("data") edu: Array<Object>;
}

Я не вижу ничего плохого в своем коде, также он работал. Может ли кто-нибудь увидеть, что с этим не так?

Примечание. Я использую Angular2 -rc6 и TypeScript 1.8.10, надеюсь, что эта информация поможет

Ответы

Ответ 1

directives устарел и удален. Time и Timeline должны войти в ваши объявления @NgModule:

@NgModule({
  declarations: [Time, Timeline, ...],
  ...
})

Ответ 2

#--------------app.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { Time} from './Time.component'
import { Timeline} from './Timeline.component'

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, TimeComponent, TimelineComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

#--------------app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
  <time></time>
  <timeline></timeline>
  `
})
export class AppComponent {
  title = 'My Title';
}

#--------------time.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'time',
  template: `<p>Do Something With Time Here</p>`
})
export class TimeComponent {

}
#--------------timeline.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'timeline',
  template: `<p>Do Something With Timeline Here</p>`
})
export class TimelineComponent {

}