Angular 2'组件'不是已知元素

Question

我正在尝试在其他模块中使用我在AppModule中创建的组件。我收到以下错误：

“未捕获（承诺）：错误：模板解析错误：

'contacts-box'不是已知元素：

1. 如果'contacts-box'是Angular组件，则验证它是否是此模块的一部分。
2. 如果'contacts-box'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息。

我的项目结构非常简单：

我将页面保存在页面目录中，其中每个页面保存在不同的模块中（例如，客户模块），每个模块都有多个组件（如customers-list-component，customers-add-component等）。我想在这些组件中使用我的ContactBoxComponent（例如，在customers-add-component内部）。

如您所见，我在widgets目录中创建了contacts-box组件，因此它基本上位于AppModule中。我将ContactBoxComponent导入添加到app.module.ts并将其放入AppModule的声明列表中。它没有用，所以我搜索了我的问题，并将ContactBoxComponent添加到导出列表中。没有帮助。我也尝试将ContactBoxComponent放在CustomersAddComponent中，然后放在另一个（来自不同的模块）中，但我得到一个错误，说有多个声明。

我错过了什么？

Answer 1

这是我遇到这样的错误时执行的5个步骤。

• 你确定这个名字是对的吗？ （还要检查组件中定义的选择器）
• 在模块中声明组件？
• 如果它在另一个模块中，导出组件？
• 如果它在另一个模块中，导入该模块？
• 重启cli？

我也尝试将ContactBoxComponent放在CustomersAddComponent中，然后放在另一个（来自不同的模块）中，但我得到一个错误，说有多个声明。

您不能两次声明组件。您应该在一个新的单独模块中声明和导出组件。接下来，您应该在要使用组件的每个模块中导入此新模块。

很难说你什么时候应该创建新模块，什么时候不应该。我通常为我重用的每个组件创建一个新模块。当我有一些我几乎在任何地方使用的组件时，我将它们放在一个模块中。当我有一个我不重用的组件时，我不会创建一个单独的模块，直到我需要它在其他地方。

虽然将所有组件放在一个模块中可能很诱人，但这对性能不利。在开发时，模块必须在每次更改时重新编译。模块越大（组件越多），花费的时间就越多。对大模块进行小的更改比在小模块中进行小的更改需要更多的时间。

Answer 2

我刚才有同样的问题。在尝试发布此处发布的某些解决方案之前，您可能需要检查该组件是否确实无效。对我来说，错误显示在我的IDE（WebStorm）中，但事实证明，当我在浏览器中运行代码时，代码运行良好。

关闭终端（运行ng服务器）并重新启动IDE后，消息停止显示。

Answer 3

我有一个类似的问题。事实证明，ng generate component（使用CLI版本7.1.4）将子组件的声明添加到AppModule，而不是模拟它的TestBed模块。

“英雄之旅”示例应用程序包含HeroesComponent与选择器app-heroes。应用程序运行良好，但ng test产生此错误消息：'app-heroes' is not a known element。手动将HeroesComponent添加到configureTestingModule（在app.component.spec.ts中）的声明中可以消除此错误。

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeroesComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
}

Answer 4

我有相同的问题宽度PHP风暴版本2017.3。这为我解决了：intellij support forum

这是一个错误的宽度@angular语言服务：https://www.npmjs.com/package/@angular/language-service

Answer 5

我遇到了同样的问题，并且由于不同的功能模块错误地包含了这个组件而发生了。当从其他功能中删除它时，它工作！

Answer 6

我的问题是在模块中缺少组件声明，但即使在添加声明后，错误仍然存​​在。我已经停止服务器并在VS Code中重建整个项目，以便错误消失。

Answer 7

在我的情况下，我的应用程序有多层模块，所以我试图导入的模块必须添加到实际使用它的模块父级pages.module.ts，而不是app.module.ts。