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

Question

我很难让模块在 Angular 2 中工作。我创建了 a plunk 来演示问题。在 plunk 中，您会看到我有 app.module。该模块导入 app-common.module，其中包含一个显示页眉的组件。顶级组件的模板 app.component 包含该组件的选择器。这是应用程序。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#add-the-contactmodule

We export the ContactComponent so other modules that import the ContactModule can include it in their component templates.

All other declared contact classes are private by default

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

Export declarable classes that components in other modules should be able to reference in their templates. These are your public classes. If you don't export a class, it stays private, visible only to other component declared in this module.

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

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

Angular 2 can't find a component declared in my feature module

angular2-components

angular