我试图在其他模块中使用我在AppModule中创建的组件。我得到以下错误:

Uncaught (in promise):错误:模板解析错误 'contacts-box'不是已知元素: 如果'contacts-box'是一个Angular组件,那么验证它是否是这个模块的一部分。 如果'contacts-box'是一个Web组件,那么在'@NgModule '中添加'CUSTOM_ELEMENTS_SCHEMA'。模式来抑制此消息。

我的项目结构很简单:

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

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.

我错过了什么?


当前回答

我花了半天时间来解决这个问题。问题出在进口方面。我的HomeModule有html中包含的homeComponent。ProductComponent是ProductModule的一部分。我在导入中添加了ProductModule到HomeModule,但忘记在导入中添加HomeModule到AppModule。添加后,问题消失了

其他回答

当我得到这样的错误时,我执行以下5个步骤。

你确定名字是正确的吗?(还要检查组件中定义的选择器) 在模块中声明组件? 如果它在另一个模块中,导出组件? 如果它在另一个模块中,导入该模块? 重启cli?

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

我也尝试把ContactBoxComponent在CustomersAddComponent,然后在另一个(从不同的模块),但我得到了一个错误,说有多个声明。

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

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

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

我知道这是一个长期解决的问题,但在我的情况下,我有一个不同的解决方案。 这实际上是我犯的一个错误,也许你也犯了,只是没有完全注意到。我的错误是,我不小心把一个模块,例如MatChipsModule, MatAutoCompleteModule,在声明部分;只由组件组成的部分,例如MainComponent, AboutComponent。这使我其他所有的进口货都认不出来了。

对于我的应用程序模式,一旦我在app.module.ts文件中声明了我的LandingPageComponent,就可以将子模块导入其中。

我刚开始一个新项目,并认为其中一些模式是理所当然的。

在我的例子中,我的应用程序有多层模块,所以我试图导入的模块必须添加到实际使用它的父模块pages.module。Ts,而不是app。module。Ts。

我也面临着同样的问题。在我的情况下,我已经忘记在声明父组件 app.module.ts

举个例子,如果你在ToDayComponent模板中使用<app-datapicker>选择器,你应该在app.module.ts中声明ToDayComponent和DatepickerComponent