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.