Angular2 TypeScript Directive error TS2345

Question

When I compile my app with tsc I get this error 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'.

And here is my code:

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

I don't see anything wrong in my code, also it used to work. Can anyone see what's wrong with this?

Note: I'm using Angular2-rc6 and TypeScript 1.8.10, hope these info helps

Answer 1

directives was deprecated and removed. Time and Timeline should go in your @NgModule declarations now:

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

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

}