假设你有一个组件:

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.com ponpons:6:3 -错误NG8001: 'pm-products' 不是已知元素:

1. 如果'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 { }

这个问题可能看起来古老而奇怪，但当我试图加载一个模块(惰性加载)并得到相同的错误时，我意识到我错过了一个组件的Exports子句，它作为一个更大模块的一部分发布。

这个角。io Link解释了原因:模块内的组件/服务，默认情况下保持私有(或受保护)。要使它们公开，您必须导出它们。

用@live-love代码示例扩展robin Djikof的回答，这就是我的例子中技术上缺失的部分(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 { }

很多答案/注释提到了在其他模块中定义的组件，或者你必须在它/它们的包含模块中导入/声明的组件(你想在另一个组件中使用)。

但在简单的情况下，当组件B和组件A定义在同一个模块中时，你想要从组件A中使用组件A，你必须在包含模块中声明这两个组件，以便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.
],
})

由终止终端 (ng serve)和重新启动VScode解析。

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

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

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

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

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

我的步骤:

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

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

4. 导入新的页面模块到pages.module.ts文件中。

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

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

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

我有一个类似的问题，但没有一个提到的解决方案工作。最后我意识到我有一个路由问题:

我想如果我在应用程序路由中指定我的组件。模块如下:

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中声明的任何其他组件将不可见，这将导致您所描述的错误消息。

导入声明模块
解决2:
延迟加载组件，如下所示:

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

这是可行的，因为整个模块都导入到这里。

我意识到你在你的例子中没有使用路由，只是把这个发布给其他可能使用路由的人，并无意中发现了这个问题。