If '<selector>' is an Angular component, then verify that it is part of this module

angular, typescript

Solution

Your `MyComponentComponent` should be in `MyComponentModule`.

And in `MyComponentModule`, you should place the `MyComponentComponent` inside the "exports".

Something like this, see code below.

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

export class MyComponentModule {
}

and place the `MyComponentModule` in the `imports` in `app.module.ts` like this (see code below).

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

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

export class AppModule {}

After doing so, the selector of your component can now be recognized by the app.

You can learn more about it here: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

Problem

I am new in Angular2. I have tried to create a component but showing an error. This is the `app.component.ts` file. ``` 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' } ``` This is the component which i want to create. ``` import { Component } from '@angular/core'; @Component({ selector: 'my-component', template: ` <p>This is my article</p> ` }) export class MyComponentComponent { } ``` Showing the two errors: - If `my-component` is an Angular component, then verify that it is part of this module. - If `my-component` is a Web Component then add `CUSTOM_ELEMENTS_SCHEMA` to the `@NgModule.schemas` of this component to suppress this message. Please Help.

Original source