If '' is an Angular component, t

Question

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:

1. If my-component is an Angular component, then verify that it is part of this module.
2. 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.

Answer 1

Hope you are having app.module.ts. In your app.module.ts add below line-

 exports: [myComponentComponent],

Like this:

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

Answer 2

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

Cheers!