Angular 2'component'不是一个已知元素 [英] 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' is not a known element:

1. 如果"contacts-box"是Angular组件，则请验证它是否属于此模块.
2. 如果"contacts-box"是Web组件，则将"CUSTOM_ELEMENTS_SCHEMA"添加到该组件的"@ NgModule.schemas"以禁止显示此消息.

我的项目结构非常简单:

My project structure is quite simple:

我将页面保存在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 got such an error.

• 您确定名称正确吗? (还要检查组件中定义的选择器)
• 是在模块中声明组件吗?
• 如果在另一个模块中，是否要导出组件?
• 如果在另一个模块中，请导入该模块?
• 重新启动cli吗?

我还尝试将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'component'不是一个已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！