Angular 2“组件"不是已知元素 [英] Angular 2 'component' is not a known element
问题描述
我正在尝试在其他模块中使用我在 AppModule 中创建的组件.但我收到以下错误:
I'm trying to use a component I created inside the AppModule in other modules. I get the following error though:
未捕获(承诺):错误:模板解析错误:
"Uncaught (in promise): Error: Template parse errors:
'contacts-box' 不是已知元素:
'contacts-box' is not a known element:
- 如果contacts-box"是一个 Angular 组件，则验证它是否是此模块的一部分.
- 如果contacts-box"是一个 Web 组件，则将CUSTOM_ELEMENTS_SCHEMA"添加到该组件的@NgModule.schemas"以抑制此消息.
我的项目结构很简单:
我将我的页面保存在 pages 目录中，其中每个页面都保存在不同的模块中(例如customers-module)，并且每个模块都有多个组件(例如customers-list-component、customers-add-component 等).我想在这些组件中使用我的 ContactBoxComponent(例如在 customers-add-component 中).
I keep my pages in pages directory, where each page is kept in different module (e.g. customers-module) and each module has multiple components (like customers-list-component, customers-add-component and so on). I want to use my ContactBoxComponent inside those components (so inside customers-add-component for example).
如您所见，我在 widgets 目录中创建了 contacts-box 组件，因此它基本上位于 AppModule 中.我将 ContactBoxComponent 导入添加到 app.module.ts 并将其放入 AppModule 的声明列表中.它没有用，所以我用谷歌搜索了我的问题并将 ContactBoxComponent 添加到导出列表中.没有帮助.我还尝试将 ContactBoxComponent 放在 CustomersAddComponent 中，然后放在另一个(来自不同模块)中，但我收到错误消息，说有多个声明.
As you can see I created the contacts-box component inside the widgets directory so it's basically inside the AppModule. I added the ContactBoxComponent import to app.module.ts and put it in declarations list of AppModule. It didin't work so I googled my problem and added ContactBoxComponent to export list as well. Didn't help. I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.
我错过了什么?
推荐答案
这是我在遇到此类错误时执行的 5 个步骤.
These are the 5 steps I perform when I get such an error.
- 您确定名称正确吗?(还要检查组件中定义的选择器)
- 在模块中声明组件?
- 如果它在另一个模块中，导出组件?
- 如果它在另一个模块中，请导入该模块?
- 重启cli?
当单元测试发生错误时，请确保您在TestBed.configureTestingModule
When the error occurs during unit testing, make sure your declared the component or imported the module in TestBed.configureTestingModule
我还尝试将 ContactBoxComponent 放在 CustomersAddComponent 中，然后放在另一个(来自不同模块)中，但我收到错误消息，说有多个声明.
I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.
一个组件不能声明两次.您应该在一个新的单独模块中声明和导出您的组件.接下来，您应该在要使用组件的每个模块中导入这个新模块.
You can't declare a component twice. You should declare and export your component in a new separate module. Next you should import this new module in every module you want to use your component.
很难说什么时候应该创建新模块，什么时候不应该.我通常为我重用的每个组件创建一个新模块.当我有一些几乎无处不在的组件时，我会将它们放在一个模块中.当我有一个不重复使用的组件时，我不会创建一个单独的模块，除非我在其他地方需要它.
It is hard to tell when you should create new module and when you shouldn't. I usually create a new module for every component I reuse. When I have some components that I use almost everywhere I put them in a single module. When I have a component that I don't reuse I won't create a separate module until I need it somewhere else.
虽然将所有组件放在一个模块中可能很诱人，但这对性能不利.在开发过程中，每次进行更改时，模块都必须重新编译.模块越大(组件越多)花费的时间就越多.对大模块进行小改动比对小模块进行小改动需要更多时间.
Though it might be tempting to put all you components in a single module, this is bad for the performance. While developing, a module has to recompile every time changes are made. The bigger the module (more components) the more time it takes. Making a small change to big module takes more time than making a small change in a small module.
这篇关于Angular 2“组件"不是已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
