如果 '<selector>' 是一个 Angular 组件，那么验证它是这个模块的一部分

您的 MyComponentComponent 应该在 MyComponentModule 中。

在 MyComponentModule 中，您应该将 MyComponentComponent 放在“exports”中。

像这样的东西，见下面的代码。

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

并像这样将 MyComponentModule 放在 app.module.ts 中的 imports 中（参见下面的代码）。

import { MyComponentModule } from 'your/file/path';

@NgModule({
   imports: [MyComponentModule]
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule {}

这样做之后，您的组件的选择器现在可以被应用程序识别。

您可以在此处了解更多信息：https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

干杯!

---

也许这是 html 标记组件的名称

您在 html 中使用类似 <mycomponent></mycomponent> 的东西

您必须使用此 <app-mycomponent></app-mycomponent>

---

您是否像这样在 app.module.ts 中导入它并删除指令位：-

@NgModule({
    bootstrap: [AppComponent],
    imports: [MyComponentModule],// or whatever the name of the module is that declares your component.

    declarations: [AppComponent],
    providers: []
})
export class AppModule {}

您的 MyComponentModule 应该是这样的：-

@NgModule({
    imports: [],
    exports: [MyComponentComponent],
    declarations: [MyComponentComponent],
    providers: [],
})
export class MyComponentModule {
}

---

在我的例子中，我正在为使用子组件的组件编写单元测试，并且我正在编写测试以确保这些子组件在模板中：

it('should include the interview selection subview', () => {
    expect(fixture.debugElement.query(By.css('app-interview')))
    .toBeTruthy()  
  }); 

我没有收到错误，而是警告：

警告：“app-interview”不是已知元素：如果“app-interview”是 Angular 组件，则验证它是否是该模块的一部分。警告：“app-interview”不是已知元素：如果“app-interview”是 Angular 组件，则验证它是否是该模块的一部分。如果“app-interview”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

此外，在测试期间，子组件没有显示在浏览器中。

我使用 ng g c newcomponent 生成所有组件，因此它们已经在 appmodule 中声明，但不是我指定的组件的测试模块。

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditorComponent,
        InterviewComponent]
    })
    .compileComponents();
  }));

---

在你的 filename.component.ts 检查你的选择器

我会说在各种 html 文件中使用标签

<my-first-component></my-first-component>

应该

<app-my-first-component></app-my-first-component>

例子

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

---

在 MyComponentModule 中声明您的 MyComponentComponent 将您的 MyComponentComponent 添加到 MyComponentModule 的导出属性

我的组件模块.ts

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

将您的 MyComponentModule 添加到您的 AppModule 导入属性

app.module.ts

    @NgModule({
       imports: [MyComponentModule]
       declarations: [AppComponent],
       providers: [],
       bootstrap: [AppComponent]
    })
    export class AppModule {} 

重要如果您仍然有该错误，请从终端停止您的服务器 ctrl+c，然后再次运行它ng serve -o

---

转到 tsconfig.json 文件。在 angularCompilerOption 下编写此代码：

 "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
     **"enableIvy": false**
 }

---

有同样的问题，发现模板组件标签与 <app-[component-name]></app-[component-name]> 一起使用。因此，如果您的组件名为 mycomponent.component.ts：

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <app-mycomponent></app-mycomponent>
  `,

---

您必须在 AppComponent 的同一模块中声明您的 MyComponentComponent。

import { AppComponent } from '...';
import { MyComponentComponent } from '...';

@NgModule({
   declarations: [ AppComponent, MyComponentComponent ],
   bootstrap: [ AppComponent ]
})
export class AppModule {}

---

就我而言，我在共享模块中有一个组件。

该组件正在加载并且运行良好，但打字稿用红线突出显示 html 标记并显示此错误消息。

在这个组件中，我注意到我没有导入 rxjs 运算符。

import {map} from 'rxjs/operators';

当我添加此导入时，错误消息消失了。

检查组件内的所有导入。

希望它可以帮助某人。

---

检查父组件在哪个模块中声明...

如果您的父组件是在共享模块中定义的，那么您的子模块也必须如此。

父组件可以在共享模块中声明，而不是基于文件目录结构/命名的逻辑模块，在我的情况下，即使 Angular CLI 将其添加到错误的模块中。

---

我正在使用 Angular v11 并在尝试延迟加载组件 (await import('./my-component.component')) 时遇到此错误，即使正确设置了 import 和 export。

我终于发现解决方案是删除单独的专用模块文件并将模块内容移动到组件文件本身中。

rm -r my-component.module.ts

并在 my-component.ts 中添加模块（同一文件）

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.page.html',
  styleUrls: ['./my-component.page.scss'],
})
export class MyComponent {
}

@NgModule({
  imports: [CommonModule],
  declarations: [MyComponent],
})
export class MyComponentModule {}

---

希望你有 app.module.ts。在您的 app.module.ts 中添加以下行 -

 exports: [myComponentComponent],

像这样：

import { NgModule, Renderer } from '@angular/core';
import { HeaderComponent } from './headerComponent/header.component';
import { HeaderMainComponent } from './component';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [
        HeaderMainComponent,
        HeaderComponent
    ],
    imports: [
        RouterModule,
    ],
    providers: [],
    bootstrap: [HeaderMainComponent],
    exports: [HeaderComponent],
})
export class HeaderModule { }

---

在您的 components.module.ts 中，您应该像这样导入 IonicModule：

import { IonicModule } from '@ionic/angular';

然后像这样导入 IonicModule：

  imports: [
    CommonModule,
    IonicModule
  ],

所以你的 components.module.ts 将是这样的：

import { CommonModule } from '@angular/common';
import {PostComponent} from './post/post.component'
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [PostComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [PostComponent]
})
export class ComponentsModule { }```

---

不要导出**默认**类 MyComponentComponent！

可能属于标题的相关问题，如果不是具体问题：

我不小心做了一个...

export default class MyComponentComponent {

……这也把事情搞砸了。

为什么？当我将它放入 declarations 时，VS Code 将导入添加到我的模块中，但不是......

import { MyComponentComponent } from '...';

它有过

import MyComponentComponent from '...';

这并没有映射到下游，假设是因为它没有在默认导入的任何地方“真正”命名。

export class MyComponentComponent {

没有default。利润。

---

这可能会迟到，但我遇到了同样的问题，但我重建（ng serve）项目并且错误消失了

---

上述错误也是从 Angular 9 开始产生的。此 book 提供了一个解决方案。

“警告建议 CUSTOM_ELEMENTS_SCHEMA，但有问题的元素不是 Web 组件。我们希望 Angular 简单地忽略这些元素。因此我们使用 NO_ERRORS_SCHEMA，“允许任何元素上的任何属性的架构”。将 schemas: [NO_ERRORS_SCHEMA] 添加到您的各自.spec 文件消除了错误。

await TestBed.configureTestingModule({
  declarations: [MyComponent],
  schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();

---

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

我想如果我在 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_declaringModule').then(m => m.declaringModule)},
}

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

我意识到您在示例中没有使用路由，只是将其发布给可能使用路由并偶然发现此问题以寻找解决方案的任何其他人，就像我一样。

---