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 (Compone

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

Had a similar scenario to MMalke. By default Angular adds the prefix app- to the selector name of a component when the component is generated via the command line interface. I should have written <app-my-component><app-my-component> but I wrote <my-component><my-component> instead. FYI, check to make sure the component's selector name matches what's in your HTML.

Answer 5

I just experienced the same, and the problem was that I had the wrong case ('a' vs 'A') for the component.

In my parent component's template, I had:

<mychild-component></mychild-component>

Instead of

<myChild-component></myChild-component>