角度2“组件”不是已知元素

Question

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

msgstr"未捕获（promise中）：错误：模板解析错误：

“联系人框”不是已知元素：

1. 如果“触点盒”是一个角度组件，则确认它是该模块的一部分
2. 如果“联系人框”是Web组件，则将“自定义元素”模式添加到“@NgModule”。“此组件的架构”以抑制此消息

我将我的页面保存在页面目录中，其中每个页面保存在不同的模块中（例如客户模块），每个模块具有多个组件（如客户列表组件，客户添加组件等）。我想在这些组件中使用我的ConrectBoxComponent（例如在客户添加组件中）。

如您所见，我在widgets目录中创建了contacts box组件，因此它基本上位于AppModule中。我将ContactBoxComponent导入应用程序。单元ts并将其放入AppModule的声明列表中。它不起作用，所以我用谷歌搜索我的问题，并将ContactBoxComponent添加到导出列表中。没有帮助。我还尝试将ContactBoxComponent放入CustomerAddComponent，然后放入另一个（来自不同的模块）中，但出现了一个错误，即存在多个声明。

我错过了什么？

Answer 1

我只是有完全相同的问题。在尝试这里发布的一些解决方案之前，您可能需要检查组件是否真的不工作。对我来说，错误显示在我的IDE（WebStorm）中，但事实证明，当我在浏览器中运行时，代码运行得非常好。

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

Answer 2

我也有类似的问题。结果是ng generate component（使用CLI 7.1.4版）将子组件的声明添加到AppModule中，而不是添加到模拟它的测试床模块中。

“英雄之旅”示例应用程序包含一个带有选择器的英雄组件。该应用程序在服务时运行正常，但ng test产生了以下错误消息：'app-heros'不是已知元素。将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 3

当我遇到这样的错误时，我会执行以下5个步骤。

• 您确定名称正确吗？（同时检查组件中定义的选择器）
• 在模块中声明组件
• 如果它在另一个模块中，是否导出该组件
• 如果它在另一个模块中，是否导入该模块
• 重新启动cli

当错误发生在单元测试期间，请确保您声明的组件或导入模块中的TestBed.configureTestingMoules

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

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

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

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