<p dir="auto">I have a simple Angular2 Application, which contains <code class="notranslate">App</code>, <code class="notranslate">P1</code>, <code class="notranslate">P2</code>, <code class="notranslate">Child</code> in total 4 components, where <code class="notranslate">App</code> uses <code class="notranslate">P1</code> and <code class="notranslate">P2</code>, and both <code class="notranslate">P1</code> and <code class="notranslate">P2</code> uses <code class="notranslate">Child</code>.</p>
<p dir="auto">Here is the code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({ 
  selector: 'child',
  template: '&lt;div&gt; child &lt;div&gt;',
})
export class ChildCmp {}

@Component({ 
  selector: 'p1',
  template: '&lt;div&gt; P1: &lt;child&gt;&lt;/child&gt;&lt;/div&gt;',
  directives:[ChildCmp],
})
export class P1Cmp {}

@Component({ 
  selector: 'p2',
  template: '&lt;div&gt; P2: &lt;child&gt;&lt;/child&gt;&lt;child&gt;&lt;/child&gt;&lt;/div&gt;',
  directives:[ChildCmp],
})
export class P2Cmp {}

@Component({ 
  selector: 'my-test',
  template: '&lt;p1&gt;&lt;/p1&gt;&lt;p2&gt;&lt;/p2&gt;',
  directives:[P1Cmp, P2Cmp],
})
export class TestApp {}

bootstrap(TestApp);"><pre class="notranslate"><code class="notranslate">@Component({ 
  selector: 'child',
  template: '&lt;div&gt; child &lt;div&gt;',
})
export class ChildCmp {}

@Component({ 
  selector: 'p1',
  template: '&lt;div&gt; P1: &lt;child&gt;&lt;/child&gt;&lt;/div&gt;',
  directives:[ChildCmp],
})
export class P1Cmp {}

@Component({ 
  selector: 'p2',
  template: '&lt;div&gt; P2: &lt;child&gt;&lt;/child&gt;&lt;child&gt;&lt;/child&gt;&lt;/div&gt;',
  directives:[ChildCmp],
})
export class P2Cmp {}

@Component({ 
  selector: 'my-test',
  template: '&lt;p1&gt;&lt;/p1&gt;&lt;p2&gt;&lt;/p2&gt;',
  directives:[P1Cmp, P2Cmp],
})
export class TestApp {}

bootstrap(TestApp);
</code></pre></div>
<p dir="auto">The <strong>index.html</strong> to trigger the app is plain <code class="notranslate">&lt;my-test&gt;&lt;/my-test&gt;</code> with all required libs of Angular2.</p>
<p dir="auto">You can check the demo in <a href="http://plnkr.co/edit/Kir7QmwhSsIuAU5IrnMh?p=info" rel="nofollow">Plunker</a>, console log shows</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="EXCEPTION: TypeError: viewFactory_ChildCmp0 is not a function"><pre class="notranslate"><code class="notranslate">EXCEPTION: TypeError: viewFactory_ChildCmp0 is not a function
</code></pre></div>
<p dir="auto">Why it breaks?</p>
<p dir="auto">This only happen when I put the <code class="notranslate">Child</code> into the both <code class="notranslate">P1</code> and <code class="notranslate">P2</code>, where they are in the same parent component.</p>
<p dir="auto">I think it is normal for developer to buildup some reusable component like <code class="notranslate">child</code> then use it all around?</p>
<p dir="auto">The Angular version is beta.01 and I tried this in Chrome and Firefox in both Ubuntu and Mac.</p>
<p dir="auto">While updating to beta.1, I encountered an error with nested components. Depending on the order I use the components, it fails unexpectedly with the following error:</p>
<p dir="auto">EXCEPTION: TypeError: viewFactory_BlueBox0 is not a function.</p>
<p dir="auto">This may be related to the change in <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/angular/angular/commit/7ae23ad/hovercard" href="https://github.com/angular/angular/commit/7ae23ad"><tt>7ae23ad</tt></a></p>
<p dir="auto">I reproduced the error in this plunkr:<br>
<a href="http://plnkr.co/edit/8Zl0JdbV5fuBMxDqcg1L?p=preview" rel="nofollow">http://plnkr.co/edit/8Zl0JdbV5fuBMxDqcg1L?p=preview</a></p>