我试图在其他模块中使用我在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.
我错过了什么?
当我得到这样的错误时，我执行以下5个步骤。
你确定名字是正确的吗?(还要检查组件中定义的选择器)
在模块中声明组件?
如果它在另一个模块中，导出组件?
如果它在另一个模块中，导入该模块?
重启cli?
当错误发生在单元测试期间，请确保您在TestBed.configureTestingModule中声明了组件或导入了模块
我也尝试把ContactBoxComponent在CustomersAddComponent，然后在另一个(从不同的模块)，但我得到了一个错误，说有多个声明。
一个组件不能声明两次。您应该在一个新的单独模块中声明和导出组件。接下来，您应该将这个新模块导入到希望使用该组件的每个模块中。
很难说什么时候应该创建新模块，什么时候不应该。我通常为我重用的每个组件创建一个新模块。当我有一些几乎无处不在的组件时，我把它们放在一个模块中。当我有一个我不重用的组件时，我不会创建一个单独的模块，直到我在其他地方需要它。
尽管将所有组件放在单个模块中可能很诱人，但这对性能不利。在开发过程中，每当进行更改时，模块都必须重新编译。模块越大(组件越多)所花费的时间就越多。对大模块做小改动要比对小模块做小改动花费更多的时间。
这个问题可能看起来古老而奇怪，但是当我试图加载一个模块(惰性加载)并得到相同的错误时，我意识到我错过了作为一个大模块的一部分发布的组件的exports子句。
这个角。Link解释了原因:模块内的组件/服务，默认情况下保持私有(或受保护)。要使它们公开，您必须导出它们。
扩展@Robin Djikof的回答，用@live-love代码示例，这是我的案例中技术上缺失的部分(Angular 8):
@NgModule({
declarations: [
SomeOtherComponent,
ProductListComponent
],
imports: [
DependantModule
],
exports: [ProductListComponent]
//<- This line makes ProductListComponent available outside the module,
//while keeping SomeOtherComponent private to the module
})
export class SomeLargeModule { }
我也遇到过类似的问题。事实证明，ng generate component(使用CLI 7.1.4版)为AppModule添加了子组件的声明，但没有添加到模拟它的TestBed模块。
“英雄之旅”示例应用程序包含一个HeroesComponent，它带有选择器app- Heroes。应用程序运行正常时，但ng test产生这个错误消息:'app-heroes'不是一个已知元素。手动将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();
});
}
