Angular 2 找不到在我的功能模块中声明的组件

Question

我很难让模块在Angular 2中工作。我创建了一个plunk来演示这个问题。在plunk中，你会看到我有app.module。这个模块导入app-common。模块，它包含一个显示页头的组件。顶层组件的模板app.component包含了该组件的选择器。app.common.module:

@NgModule({
imports:[CommonModule, FormsModule],
declarations: [PageHeaderComponent]
})
export class AppCommonModule { }

app.module:

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

当应用程序运行时，它抛出一个错误，"ref-pageheader"不是一个已知的元素。如果我在app.module中声明该组件，它就能正常工作。那么，为什么我不能在导入到主app.module的模块中声明这个组件呢?这样做之后，Angular似乎找不到它了。我做错了什么?我错过什么了吗?

Answer 1

我想你应该这样导出它:

@NgModule({
    imports:[CommonModule, FormsModule],
    declarations: [PageHeaderComponent],
    exports: [PageHeaderComponent]
})
export class AppCommonModule { } 

这样其他组件就可以使用该组件。

否则PageHeaderComponent只能在AppCommonModule内部可用

参见

• https://angular.io/docs/ts/latest/guide/ngmodule.html添加—— contactmodule

我们导出ContactComponent，以便其他模块导入ContactModule可以把它包含在自己的组件模板中。

所有其他声明的联系人类默认都是私有的

• https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html !# q-what-to-export

导出其他模块中的组件应该是的可声明类能够在他们的模板中引用。这些是你的公共类。如果不导出一个类，它就保持私有，只对其他人可见

Answer 2

这个问题已经得到了回答，但是对于其他有这个问题的人来说，这是一个不同的解决方案。

检查在中声明的是哪个模块的父组件，因为在我的例子中，父组件是在Angular项目的共享模块中声明的。事实证明，我的子组件需要在共享模块中与父组件一起声明才能完成这项工作。我把我的组件从Angular CLI的模块声明中拿出来，放到了共享模块的声明中，就像父组件一样，它就工作了。

关键是:我使用了Angular CLI来生成我的组件，但是CLI把组件添加到了错误的模块声明中，然而Angular CLI并没有完全错，因为它实际上是组件的逻辑文件目录和组件的逻辑模块。

在我的例子中，父组件被用作路由组件。结果可能是我的父组件需要它自己的NgModule，但我还不确定。

Answer 3

如果其他人也有同样的问题，但到目前为止还没有找到解决方案，请查看您的导入路径。

如果你有两个模块具有相同的名称，例如CoreModule，您可能只是导入了错误的模块:

import { CoreModule } from '@angular/flex-layout';
@NgModule({
  imports: [ CoreModule ]
}) export class SomeModule

import { CoreModule } from '../core/core.module';
@NgModule({
  imports: [ CoreModule ]
}) export class SomeModule