例如

Question

我正在尝试在其他模块中使用我在AppModule中创建的组件。我收到以下错误：

“未捕获（承诺）：错误：模板解析错误：

'contacts-box'不是已知元素：


如果'contacts-box'是Angular组件，请验证它是否是此模块的一部分。

如果'contacts-box'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息。

我的项目结构非常简单：

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

正如您所看到的，我在widgets目录中创建了contacts-box组件，因此它基本上位于AppModule中。我将ContactBoxComponent导入添加到app.module.ts并将其放入AppModule的声明列表中。它没有用，所以我搜索了我的问题，并将ContactBoxComponent添加到导出列表中。没有帮助。我也尝试将ContactBoxComponent放在CustomersAddComponent中，然后放在另一个（来自不同的模块）中，但我得到一个错误，说有多个声明。

我错过了什么？

Answer 1

这是我遇到这样的错误时执行的5个步骤。

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

我也尝试将ContactBoxComponent放在CustomersAddComponent中，然后放在另一个（来自不同的模块）中，但我收到一个错误，说有多个声明。

您不能两次声明组件。您应该在一个新的单独模块中声明和导出组件。接下来，您应该在要使用组件的每个模块中导入此新模块。

很难分辨何时应该创建新模块以及何时不应该创建新模块。我通常为我重用的每个组件创建一个新模块。当我有一些我几乎在任何地方使用的组件时，我将它们放在一个模块中。当我有一个我不重用的组件时，我不会创建一个单独的模块，直到我在其他地方需要它。

虽然将所有组件放在一个模块中可能很诱人，但这对性能不利。在开发时，模块必须在每次更改时重新编译。模块越大（组件越多），花费的时间就越多。对大模块进行小的更改比在小模块中进行小的更改需要更多的时间。

Answer 2

我刚才有同样的问题。在尝试此处发布的某些解决方案之前，您可能需要检查组件是否真的不起作用。对我来说，错误显示在我的IDE（WebStorm）中，但事实证明，当我在浏览器中运行代码时，代码运行良好。

关闭终端（正在运行服务器）并重启我的IDE后，消息停止显示。

Answer 3

我有一个类似的问题。事实证明，ng generate component（使用CLI版本7.1.4）向AppModule添加了子组件的声明，但没有向模仿它的TestBed模块添加声明。

“英雄之旅”示例应用程序包含一个带有选择器HeroesComponent的{{1}}。该应用在投放后运行正常，但是app-heroes产生了以下错误消息：ng test。将'app-heroes' is not a known element手动添加到HeroesComponent（在configureTestingModule中）的声明中，可以消除此错误。

app.component.spec.ts

Answer 4

我有同样的问题宽度php风暴版2017.3。这解决了我： intellij support forum

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

Answer 5

很多答案/评论都提到了其他模块中定义的组件，或者您必须在其包含的模块中导入/声明组件（要在其他组件中使用）。

但是在最简单的情况下，如果您想使用组件A中的组件B，而这两个组件都在同一模块中定义，则必须在不仅包含B，而且包含A可以看到A的模块。

即在my-module.module.ts

中

import { AComponent } from "./A/A.component";
import { BComponent } from "./B/B.component";

@NgModule({
  declarations: [
    AComponent,   // This is the one that we naturally think of adding ..
    BComponent,   // .. but forget this one and you get a "**'AComponent'** 
                  // is not a known element" error.
  ],
})

Answer 6

这个问题看似古老而奇怪，但是当我尝试加载模块（延迟加载）并遇到相同的错误时，我意识到我缺少组件随附的 exports子句作为更大模块的一部分。

此Angular.io Link explains why：模块内的组件/服务默认情况下保持私有（或受保护）。要公开它们，必须导出它们。

将@Robin Djikof's answer扩展为@live-love code sample，这在我的情况下（角度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 { }

Answer 7

我面临着同样的问题。就我而言，我忘记了在 app.module.ts

例如，如果您在<app-datapicker>模板中使用ToDayComponent选择器，则应在 app.module.ts <中声明ToDayComponent和DatepickerComponent。 / strong>

Answer 8

路由模块（未将其视为答案）

首先检查： 如果已声明组件并将其导出到其模块内部，请将该模块导入要使用的模块并正确命名该组件在HTML内。

否则，您可能会错过路由模块中的模块：
当您具有一个路由模块，该路由模块具有从另一个模块路由到组件的路由时，在该路由模块中导入该模块非常重要。否则，Angular CLI将显示错误：component is not a known element。

例如

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,
  },

该路线将正常运行！但是，在sidebar.module.ts中导入edit-todo.module.ts时，会出现错误：app-sidebar is not a known element。

修复：：由于您已在步骤2中向edit-todo.component.ts添加了路由，因此必须在导入的侧边栏组件之后添加edit-todo.module.ts作为导入。会工作！

Answer 9

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

Answer 10

我知道这是一个长期解决的问题，但就我而言，我有不同的解决方案。这实际上是我犯的一个错误，也许你也犯了，但没有完全注意到。我的错误是我不小心在声明部分放置了一个模块，例如 MatChipsModule、MatAutoCompleteModule；仅由组件组成的部分，例如 MainComponent、AboutComponent。这使我无法识别所有其他导入。

Answer 11

我在Angular CLI中遇到了相同的问题：10.1.5 该代码可以正常工作，但该错误已显示在 VScode v1.50

中

通过杀死终端（ng服务）并重新启动VScode 来解决。

Answer 12

应该有一个组件：

product-list.component.ts：

import { Component } from '@angular/core';
    
    @Component({
        selector: 'pm-products',  
        templateUrl: './product-list.component.html'
    })
    
    
    export class ProductListComponent {
      pageTitle: string = 'product list';
    }

您会收到此错误：

src / app / app.component.ts：6：3中的
ERROR-错误NG8001：'pm-products' 不是已知元素：

如果“ pm-products”是Angular组件，则请验证它是否属于此模块。

app.component.ts：

import { Component } from "@angular/core";
@Component({
  selector: 'pm-root', // 'pm-root'
  template: `
  <div><h1>{{pageTitle}}</h1>
  <pm-products></pm-products> // not a known element ?
  </div>
  `
})
export class AppComponent {
  pageTitle: string = 'Acme Product Management';
}

确保导入组件：

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// --> add this import (you can click on the light bulb in the squiggly line in VS Code)
import { ProductListComponent } from './products/product-list.component'; 

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent // --> Add this line here

  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent],


})
export class AppModule { }

Answer 13

我开始使用Angular，就我而言，问题是我在添加'import'语句后没有保存文件。

Answer 14

这个复杂的框架使我发疯。假设您在SAME模块的另一个组件部分的模板中定义了自定义组件，则无需在模块中使用导出（例如app.module.ts）。您只需要在上述模块的@NgModule指令中指定声明即可：

db.Item.aggregate([
    {
        $match: {
            _id: ObjectId("5e6f98e41b70ea2c14c208b9")
        }
    },
    {
        $lookup: {
            from: "Data",
            localField: "_id",
            foreignField: "item",
            as: "data"
        }
    },
    {
        $project: {
            names: {
                $map: {
                    input: {
                        $concatArrays: [
                            { $arrayElemAt: ["$data.grouping_1", 0] },
                            { $arrayElemAt: ["$data.grouping_2", 0] }]
                    },
                    in: '$$this.name'
                }
            }
        }
    }
])

您无需将// app.module.ts import { JsonInputComponent } from './json-input/json-input.component'; @NgModule({ declarations: [ AppComponent, JsonInputComponent ], ...（在此示例中）导入JsonInputComponent（在此示例中）即可使用AppComponent模板中的JsonInputComponent自定义组件。您只需在自定义组件的前面加上定义了两个组件的模块名称即可（例如，app）：

AppComponent

注意app-json-input不是json-input！

此处演示：https://github.com/lovefamilychildrenhappiness/AngularCustomComponentValidation

Answer 15

在我的应用中，我的应用程序具有多层模块，因此我要导入的模块必须添加到实际使用它的模块pages.module.ts中，而不是app.module.ts。 / p>

Answer 16

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

Answer 17

我遇到了同样的问题，这是由于错误地包含了此组件的不同功能模块而发生的。将其从其他功能中删除后，它可以正常工作！

Angular 2'组件'不是已知元素

17 个答案:

路由模块（未将其视为答案）

例如