title: Angular directive isn't compiled at ES6
body: <p>I try to build a directive with ES6 class and get it compiled, but fail. Here is the definition and how the directive is added into the app.</p>
  
  <p>dataDiagram.js</p>
  
  <pre><code>export default class dataDiagram {
    constructor() {
      this.restrict = 'E';
      this.template = '&lt;div&gt;This is my directive.&lt;/div&gt;';
      this.scope = false;
    }
  }
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>import dataDiagram from 'dataDiagram';
  
  angular.module('myApp', [])
      .directive('dataDiagram', () =&gt; new dataDiagram());
  </code></pre>
  
  <p>Then I add the <code>&lt;data-diagram&gt;&lt;/data-diagram&gt;</code> into my <code>index.html</code>, and expect it will become <code>&lt;data-diagram&gt;&lt;div&gt;This is my directive.&lt;/div&gt;&lt;/data-diagram&gt;</code>. However, the DOM remain to be <code>&lt;data-diagram&gt;&lt;/data-diagram&gt;</code> after I reload the app, and the directive isn't compiled. No error is thrown during the process.</p>
  
  <p>I would like to know if I miss something when I write the code. Thanks in adavnce.</p>