我试图在其他模块中使用我在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.

我错过了什么?


当前回答

我正在开始使用Angular,在我的情况下,问题是在添加'import'语句后还没有保存文件。

其他回答

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

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

路由模块(不认为这是一个答案)

首先检查:是否在模块中声明并导出了组件,导入了想要使用它的模块,并在HTML中正确命名了组件。

否则,你可能会错过路由模块中的一个模块: 当您有一个路由模块,该路由从另一个模块路由到一个组件时,在该路由模块中导入该模块是很重要的。否则,Angular CLI会显示错误:component不是已知元素。

例如

1)具有以下项目结构:

├───core
│   └───sidebar
│           sidebar.component.ts
│           sidebar.module.ts
│
└───todos
    │   todos-routing.module.ts
    │   todos.module.ts
    │
    └───pages
            edit-todo.component.ts
            edit-todo.module.ts

2)在todos-routing.module内部。Ts你有一个到edit.todo.component.ts的路径(不导入它的模块):

  {
    path: 'edit-todo/:todoId',
    component: EditTodoComponent,
  },

这条路线会很好!但是,当在edit-todo.module中导入sidebar.module.ts时。你会得到一个错误:app-sidebar不是一个已知的元素。

修正:由于您已经在步骤2中添加了到edit-todo.component.ts的路由,您将必须添加edit-todo.module。Ts作为导入,之后导入的侧边栏组件将工作!

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

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

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

在我的例子中,问题是模块中缺少组件声明,但即使添加了声明,错误仍然存在。我不得不停止服务器并在VS Code中重新构建整个项目以消除错误。

这个问题可能看起来古老而奇怪,但是当我试图加载一个模块(惰性加载)并得到相同的错误时,我意识到我错过了作为一个大模块的一部分发布的组件的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 { }