title: Angular 2 component directive not working
body: <p>I am a beginner in angular 2 and I want to make my first app working. I am using TypeScript.
  I have the <strong>app.component.ts</strong> in which I have made a directive to another compoent called <strong>todos.component</strong> but I am getting the following error at compile time:</p>
  
  <pre><code>[0] app/app.component.ts(7,3): error TS2345: Argument of type '{ moduleId: string; selector: string; directives: typeof TodosComponent[]; templateUrl: string; s ...' is not assignable to parameter of type 'Component'.
  [0]   Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.
  </code></pre>
  
  <p>My code is like this:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;!-- 1. Load libraries --&gt;
       &lt;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;!-- 2. Configure SystemJS --&gt;
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        System.import('app').catch(function(err){ console.error(err); });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;!-- 3. Display the application --&gt;
    &lt;body&gt;
      &lt;app-root&gt;Loading...&lt;/app-root&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import {TodosComponent} from './todos/todos.component';
  
  @Component({
    moduleId : module.id,
    selector: 'app-root',
    directives: [TodosComponent],
    templateUrl : 'app.component.html',
    styleUrls : ['app.component.css']
  })
  
  export class AppComponent {
      title: string = "Does it work?";
  }
  </code></pre>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>&lt;h1&gt; Angular 2 application&lt;/h1&gt;
  {{title}}
  &lt;app-todos&gt;&lt;/app-todos&gt;
  </code></pre>
  
  <p><strong>todos.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    moduleId : module.id,
    selector: 'app-todos',
    template: '&lt;h2&gt;Todo List&lt;/h2&gt;'
  })
  
  export class TodosComponent {
      title: string = "You have to do the following today:";    
  }
  </code></pre>
  
  <p>Without the directive, the app works fine. 
  Any help would be appreciated! </p>
  
  <p>Thanks in advance!</p>