title: Angular2 Selector did not match any elements in nested Components
body: <p>I have two nested <code>@Components</code> en angular 2. The view renders just fine but it always throws a javascript error the first time.
  Here is my code in Typescript.</p>
  
  <p>App HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;my-app&gt;loading...&lt;/my-app&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>App Component:</p>
  
  <pre><code>import {bootstrap, Component} from 'angular2/angular2';
  import {CanvasComponent} from "./CanvasComponent";
  
  @Component({
    selector: 'my-app',
    template: `
        &lt;h1&gt;{{title}}&lt;/h1&gt;
        &lt;h2&gt;My Games&lt;/h2&gt;
        &lt;div&gt;
          &lt;my-canvas&gt;&lt;/my-canvas&gt;
        &lt;/div&gt;
    `,
    directives: [CanvasComponent]
  })
  
  class AppComponent {
  }
  
  bootstrap(AppComponent);
  </code></pre>
  
  <p>Canvas Component:</p>
  
  <pre><code>import {bootstrap, Component, View} from 'angular2/angular2';
  
  @Component({
    selector: 'my-canvas'
  })
  
  @View({
    template: `
    &lt;div&gt;
      &lt;span&gt;Balls:&lt;/span&gt;
      &lt;div&gt;{{canvas.length}}&lt;/div&gt;
    &lt;/div&gt;
    `
  })
  
  export class CanvasComponent {
    canvas = [1,2,3];
  }
  
  bootstrap(CanvasComponent);
  </code></pre>
  
  <p>The error is:</p>
  
  <pre><code>EXCEPTION: The selector "my-canvas" did not match any elements
  </code></pre>