Angular 2“组件”不是已知元素

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

你确定名字是对的吗？ （还要检查组件中定义的选择器）

在模块中声明组件？

如果它在另一个模块中，导出组件？

如果它在另一个模块中，导入那个模块？

重启cli？

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

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

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

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

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

---

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

“英雄之旅”示例应用程序包含一个带有选择器 app-heroes 的 HeroesComponent。该应用程序在提供服务时运行良好，但 ng test 产生了以下错误消息：'app-heroes' is not a known element。将 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();
  });
}

---

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

在我关闭终端（正在运行 ng serve）并重新启动我的 IDE 后，该消息停止显示。

---

许多答案/评论提到了在其他模块中定义的组件，或者您必须在其/它们的包含模块中导入/声明该组件（您想在另一个组件中使用）。

但是在简单的情况下，如果组件 B 中的组件 A 都定义在同一个模块中，那么您必须在 B 的包含模块中声明 both 组件以请参阅 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.
  ],
})

---

我在使用 Angular CLI 时遇到了同样的问题：10.1.5 代码工作正常，但错误显示在 VScode v1.50 中

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

---

我有相同的问题宽度 php Storm 版本 2017.3。这为我解决了这个问题：intellij support forum

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

---

就我而言，我的应用程序有多个模块层，因此我尝试导入的模块必须添加到实际使用它的模块父级 pages.module.ts，而不是 app.module.ts。

---

这个问题可能看起来很老而且很奇怪，但是当我尝试加载模块（延迟加载）并遇到相同的错误时，我意识到我缺少作为更大模块的一部分提供的组件的导出子句。

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

使用 @live-love code sample 扩展 @Robin Djikof's answer，这就是我的案例（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 { }

---

路由模块（没有将此视为答案）

首先检查：如果您在其模块中声明并导出了组件，请在您想要使用它的地方导入模块并在 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,
  },

该路线将正常工作！但是，在 edit-todo.module.ts 中导入 sidebar.module.ts 时，您将收到错误：app-sidebar is not a known element。

修复：由于您在第 2 步中添加了到 edit-todo.component.ts 的路由，因此您必须将 edit-todo.module.ts 添加为导入，之后导入的侧边栏组件将起作用！

---

我面临着同样的问题。就我而言，我忘记在 app.module.ts 中声明父组件

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

---

有时甚至只是重新启动您的 IDE 就可以了！！😁 面临同样的问题，通过重新启动 VS Code 解决了

---

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

---

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

---

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

---

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

---

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

// app.module.ts

import { JsonInputComponent } from './json-input/json-input.component';

@NgModule({
  declarations: [
    AppComponent,
    JsonInputComponent
  ],
  ...

您无需将 JsonInputComponent（在此示例中）导入 AppComponent（在此示例中）即可在 AppComponent 模板中使用 JsonInputComponent 自定义组件。您只需在自定义组件前面加上已定义两个组件的模块名称（例如 app）：

<form [formGroup]="reactiveForm">
  <app-json-input formControlName="result"></app-json-input>
</form>

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

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

---

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

---

假设你有一个组件：

产品列表.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 中的错误 - 错误 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 { }

---

在执行 Angular 的 Getting Started Tutorial 时，我在使用 Angular Generator 通过工具 stackblitz.com 生成一个名为 product-alerts 的新组件后也收到此错误。

'app-product-alerts' is not a known element:

发现：其他人在 2021 年 8 月上旬也遇到过这种情况。目前，这似乎是 StackBlitz IDE 中的一个错误。 https://github.com/angular/angular/issues/43020

---

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

我的步骤：

生成新页面组件 将现有组件导入新页面的 module.ts 文件 在新页面的 HTML 文件中使用 组件选择器

得到错误并卡在这里。对我来说最后一步是：

将新页面模块导入 pages.module.ts 文件。

现在它按预期工作。这次错误消息并没有太大帮助。

---

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

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

---

我遇到了类似的问题，但上述解决方案都没有奏效。最后我意识到我有一个路由问题：

我想如果我在 app-routing.module 中指定我的组件，如下所示：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './pages/main/main.component';

const routes: Routes = [
  {
    path: '', 
    component: MainComponent
  },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我不必在我的 AppModule 中导入 MainModule，这是错误的，因为这里只导入了组件。在 MainModule 中声明的任何其他组件都将不可见，这会导致您描述的错误消息。

解决方案1：导入声明模块解决方案2：像这样延迟加载组件：

const routes: Routes = [
{
    path: '', loadChildren: () => import('path_to_your_module').then(m => m.MainModule)},
}

这是有效的，因为整个模块都在这里导入。

我意识到您在示例中没有使用路由，只是将其发布给可能使用路由并偶然发现此问题的任何其他人。

---