RC5中的外部模块：由于它不是已知属性，因此无法绑定到“ X”

Question

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 1

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 {}

Answer 2

Can't bind to 'X' since it isn't a known property

If you see this error, then be sure you have not included your Component in your bootstrap module file, Do the following

if you have 3 Components

 1. app.component.ts
 2. greeting.service.ts
 3. hello.ts

then in you main bootstrapping file include everything as follows

import { BrowserModule }  from '@angular/platform-browser';  
import { NgModule } '@angular/core';
import { MyApp } from './app.component'
import {Welcome} from './services/welcome';
import {Hello} from './hello.component';

@NgModule({
  imports: [BrowserModule],
  providers:[Welcome],
  declarations: [MyApp
                  ,Hello
                ],
  bootstrap: [MyApp]
})
export class MyAppModule {

}