Can't bind to 'x' since it isn't a known property of 'y'

Question

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.

Here's the proof of concept (open the console to see the error).

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.

<tree-root [nodes]="nodes"></tree-root> 

Can't bind to 'nodes' since it isn't a known property of 'tree-root'

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.

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.

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.

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:

<ul>     <li *ngFor="let node of nodes">         {{ node.name }}     </li> </ul> 

the app runs fine with no errors.

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 *ngFor works but the tree-root directive doesn't).

Answer 1

I went back to the start and realised what I missed:

In feature-b.module.ts I should have exported the component:

exports: [     FeatureBComponent ] 

It was also necessary for me to import FeatureBModule rather than FeatureBComponent.

import { FeatureBComponent } from '../feature-b/feature-b.component';

import { FeatureBModule } from '../feature-b/feature-b.module';