lukiffer lukiffer - 2 months ago 13
TypeScript Question

External Module in RC5: Can't bind to 'X' since it isn't a known property

In the process of updating RC4 => RC5 and have pulled several components into modules. Now, get a runtime error:

Unhandled Promise rejection: Template parse errors: Can't bind to 'X' since it isn't a known property of 'Y'
.


  • If I add the component class to the
    declarations
    property of the app's
    @NgModule()
    decorator, it works.

  • Only when the component class is in an external module and that module is added to the
    imports
    property of the app's
    @NgModule()
    do I get this error.



Here's a plunkr.

External Module Code

export class ExampleConfig {
public name: string;
}

@Component({
selector: 'example',
template: '<strong>{{ config?.name }}</strong>'
})
export class ExampleComponent {
@Input() config: ExampleConfig;
}

@NgModule({
declarations: [ExampleComponent]
})
export class ExampleModule {}


App Module Code

@Component({
selector: 'my-app',
template: '<h2>Hello <example [config]="exampleConfig"></example></h2>'
})
export class App {
constructor() {
this.exampleConfig = new ExampleConfig();
this.exampleConfig.name = 'World';
}
protected exampleConfig: ExampleConfig;
}

@NgModule({
imports: [BrowserModule, ExampleModule],
declarations: [App],
bootstrap: [App]
})
export class AppModule {}

Answer

Digging around in the material2 source, it looks like you have to add components to the exports property of the module decorator:

@NgModule({
  declarations: [ExampleComponent],
  exports: [ExampleComponent]
})
export class ExampleModule {}