title: Can't bind to 'x' since it isn't a known property of 'y'
body: <p>I have an angular site that contains a component inside another component. I'm using routing and lazy loading the outer component (ComponentA). The inner component (ComponentB) depends on a 3rd party directive.</p>
  
  <p>Here's the <a href="https://plnkr.co/edit/7maVz2vO9LKTli47hyWl?p=info" rel="noreferrer">proof of concept</a> (open the console to see the error).</p>
  
  <p>I'm getting an error when using the 3rd party directive inside ComponentB. This isn't an error with the directive itself but an error with how I've structured my code.</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;tree-root [nodes]="nodes"&gt;&lt;/tree-root&gt;
  </code></pre>
  
  <blockquote>
    <p>Can't bind to 'nodes' since it isn't a known property of 'tree-root'</p>
  </blockquote>
  
  <p>I can solve this issue by importing the 3rd party module in the ComponentA but since ComponentA doesn't depend on this module, it feels wrong to do so.</p>
  
  <p>The Plunker I have created is a very small portion of my app, designed to isolate the issue. It's to demonstrate a concept, not to make sense as an app. What I'm trying to achieve is to create a component that can be added to any of my pages. This component could be a widget or something, added to one or more parent pages. It is self contained.</p>
  
  <p>My limited knowledge in Angular is starting showing here. Since components are supposed to allow us to do component based development breaking our application into smaller parts, I don't understand why ComponentA needs to know what dependencies ComponentB has in order to use it in its view. </p>
  
  <p>I'll also demonstrate that this is only an issue because I have a 3rd party directive included in ComponentB. If I remove the directive, all works. For example if I did something like this instead:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li *ngFor="let node of nodes"&gt;
          {{ node.name }}
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>the app runs fine with no errors.</p>
  
  <p>What have I done wrong and what should I be doing differently? If the solution is to add an import to ComponentA, I will accept that as an answer given a good explanation is provided (such as why <code>*ngFor</code> works but the <code>tree-root</code> directive doesn't).</p>