如果“ <selector>”是Angular组件，则验证它是否属于此模块。

我是Angular2的新手。我试图创建一个组件，但显示错误。

这是app.component.ts文件。

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component.component';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  directives: [MyComponentComponent]
})
export class AppComponent { name = 'Sam' }

这是我要创建的组件。

import { Component } from '@angular/core';

@Component({
selector: 'my-component',
template: `
    <p>This is my article</p>
`
})

export class MyComponentComponent {

}

显示两个错误：

1. 如果my-component是Angular组件，则确认它是该模块的一部分。
2. 如果my-component是Web组件，则添加CUSTOM_ELEMENTS_SCHEMA到@NgModule.schemas该组件的中以禁止显示此消息。

请帮忙。

您MyComponentComponent应该在MyComponentModule。

在中MyComponentModule，您应该将MyComponentComponent“出口”放在其中。

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

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

export class MyComponentModule {
}

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

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

在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']
})

就我而言，我正在为使用子组件的组件编写单元测试，并正在编写测试以确保这些子组件位于模板中：

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

我没有收到错误，但发出了警告：

警告：“ app-interview”不是已知元素：

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

此外，该子组件在测试期间未显示在浏览器内部。

我曾经ng g c newcomponent生成所有组件，所以已经在appmodule中声明了它们，但没有为我指定的测试模块声明它们。

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

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

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

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

1. 声明您MyComponentComponent的身份MyComponentModule
2. 您添加MyComponentComponent到exports属性 MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

3. 将您的添加MyComponentModule到您的AppModule imports属性

app.module.ts

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

要点：如果仍然存在该错误，请ctrl+c从终端停止服务器，然后再次运行ng serve -o

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

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

在该组件内部，我注意到我没有导入rxjs运算符。

import {map} from 'rxjs/operators';

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

检查组件内部的所有导入。

希望它可以帮助某人。

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

如果在共享模块中定义了父组件，则子模块也必须定义。

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

希望你有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 { }```

不要export **default** class MyComponentComponent啦！

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

我不小心做了...

export default class MyComponentComponent {

...这也把事情搞砸了。

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

import { MyComponentComponent } from '...';

它有过

import MyComponentComponent from '...';

而且它没有映射到下游，据推测是因为它没有被“真正”命名为具有默认导入的任何位置。

export class MyComponentComponent {

没有default。利润。