Angular 2“组件”不是已知元素

Question

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

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

‘contacts-box’ 不是已知元素：

1. 如果 ‘contacts-box’ 是一个 Angular 组件，那么验证它是这个模块的一部分。
2. 如果“contacts-box”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

我的项目结构很简单：

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

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

我错过了什么？

原文由 Aranha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

当单元测试发生错误时，请确保您在 TestBed.configureTestingModule 中声明了组件或导入了模块

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

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

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

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

原文由 Robin Dijkhof 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我遇到了类似的问题，但上述解决方案都没有奏效。最后我意识到我有一个路由问题：

我想如果我在 app-routing.module 中指定我的组件，如下所示：

 import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './pages/main/main.component';

const routes: Routes = [
  {
    path: '',
    component: MainComponent
  },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我不必在我的 AppModule 中导入 MainModule，这是错误的，因为这里只导入了组件。在 MainModule 中声明的任何其他组件都将不可见，这会导致您描述的错误消息。

解决方案1：

导入声明模块

解决方案2：

像这样延迟加载组件：

 const routes: Routes = [
{
    path: '', loadChildren: () => import('path_to_your_module').then(m => m.MainModule)},
}

这是有效的，因为整个模块都在这里导入。

我意识到您在示例中没有使用路由，只是将其发布给可能使用路由并偶然发现此问题的任何其他人。

原文由 Tombalabomba 发布，翻译遵循 CC BY-SA 4.0 许可协议