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

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:

But fails this way:

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.