title: angular2 directive `Cannot read property 'subscribe' of undefined` with outputs metadata
body: <p>Regarding Angular2 directive, I wanted to use <code>outputs</code> instead of using <code>@Output</code> because I have many custom events and wanted to keep DRY.</p>
  
  <p>However, I am having <code>TypeError: Cannot read property 'subscribe' of undefined</code>, and I don't know why it's happening.</p>
  
  <p><a href="http://plnkr.co/edit/SFL9fo?p=preview" rel="noreferrer">http://plnkr.co/edit/SFL9fo?p=preview</a></p>
  
  <pre><code>import { Directive } from "@angular/core";
  
  @Directive({
    selector: '[my-directive]',
    outputs: ['myEvent']
  }) 
  export class MyDirective {
    constructor() {
      console.log('&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; this.myEvent', this.myEvent);
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/E1jDb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/E1jDb.png" alt="enter image description here"></a></p>
  
  <p>And this is app component that uses this directive</p>
  
  <p><a href="https://i.stack.imgur.com/U0Urm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/U0Urm.png" alt="enter image description here"></a></p>