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

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';

I was able to get the application running by removing FeatureBModule entirely. Then the FeatureAModule is correct as it needs to then delcare FeatureBComponent.

The FeatureAModule then looks like this:

import { NgModule }       from '@angular/core';import { CommonModule }   from '@angular/common';import { FeatureAComponent }           from './feature-a.component';import { FeatureARoutingModule }       from './feature-a-routing.module';import { TreeModule }                  from 'angular-tree-component';import { FeatureBComponent } from '../feature-b/feature-b.component';@NgModule({  imports: [    CommonModule,    FeatureARoutingModule,    TreeModule  ],  declarations: [    FeatureAComponent,    FeatureBComponent  ]})export class FeatureAModule {}

I updated the plunker here: https://plnkr.co/edit/mkGH5uG1FGsWWpWbS1Zw?p=preview

You can get this error on directives where you are binding to the attribute that attaches the directive itself, but has the corresponding Input decorated incorrectly.

@Directive({ selector: '[myDirective]' })export class MyDirective {    @Input('mydirectiveSpelledDifferently') data: any;}

The input in the example has "mydirectiveSpelledDifferently" but it should be matching the selector (i.e. "myDirective").

You'll know this is the issue in your case when it works this way:

<div myDirective>

But fails this way:

<div [myDirective]="something">

The working case is correctly finding the selector you chose for your directive. The failing case is looking for the @Input() decoration and failing to because it doesn't exist as @Input('myDirective') on your directive.