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

Question

在更新RC4 => RC5的过程中，已将几个组件拉入模块。 现在，得到一个运行时错误： Unhandled Promise rejection: Template parse errors: Can't bind to 'X' since it isn't a known property of 'Y' 。

• 如果我将组件类添加到应用程序的@NgModule()装饰器的declarations属性中，则它将起作用。
• 仅当组件类在外部模块中并且将该模块添加到应用程序的@NgModule()的imports属性中时， @NgModule()此错误。

这是一个笨拙的人 。

外部模块代码

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

应用模块代码

@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

在material2源代码中进行挖掘，似乎您必须将组件添加到模块装饰器的exports属性中：

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

Answer 2

无法绑定到“ X”，因为它不是已知属性

如果看到此错误，请确保您的引导模块文件中未包含组件，请执行以下操作

如果您有3个组件

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

然后在您的主引导文件中包含以下所有内容

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 {

}