Angular 2中的“component”不是一个已知的元素

我试图在其他模块中使用我在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。添加后，问题消失了

2021-07-30 08:20:44

其他回答

我也遇到了同样的问题，这是因为不同的功能模块错误地包含了这个组件。当把它从其他功能中移除时，它工作了!

2019-05-16 15:10:35

我也遇到过类似的问题。事实证明，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();
  });
}

2019-01-14 19:43:50

我有相同的问题宽度php风暴版本2017.3。这为我解决它: Intellij支持论坛

它是一个错误宽度@angular语言服务: https://www.npmjs.com/package/@angular/language-service

2018-03-09 14:30:20

在执行Angular的入门教程时，我也在使用stackblitz.com工具使用Angular生成器生成一个名为product-alerts的新组件后收到了这个错误。

'app-product-alerts'不是已知元素:

发现:其他人在2021年8月初也经历过这种情况。目前，它似乎是StackBlitz IDE中的一个bug。 https://github.com/angular/angular/issues/43020

2021-08-17 03:38:38

我的情况有点不同。我得到了这个错误消息，但这是因为我的页面模块没有我生成的新页面。

我的步骤:

生成新的页面组件将现有组件导入到新页面的模块中。ts文件在新页面的HTML文件中使用<myapp-header></myapp-header>组件选择器

得到了错误，被困在这里。对我来说，最后一步是: