Is an angular component, then verify that it is part of this module.

Question

Problem :

I have recently started learning Angular2. I am trying to create the component but I am facing below error.

“Is an angular component, then verify that it is part of this module.”

 

KIndly find below my code for your reference.

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

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

Following is the component for your reference.

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

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

export class MyHelloComponent {

}

Kindly help me in fixing above error.

Answer 1

I can help you in fixing your error. Please find below the required solution.

Please note your MyHelloComponent should be present in your MyComponentModule.

Also in your MyComponentModule you should try to place your MyHelloComponent inside your "exports".

Please refer code below.

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

export class MyComponentModule {
}

and then place your MyComponentModule in a imports in your app.module.ts please see code below

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

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

export class AppModule {}

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

Answer 2

Your MyComponentComponent must be in MyComponentModule.

And in MyComponentModule, you must place the MyComponentComponent within the "exports".

pursue the below code:

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

export class MyComponentModule {
}

and set the MyComponentModule in the imports in app.module.ts like this (view code below).

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

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

export class AppModule {}

Afterward doing so, the selector of your component can now be acknowledged by the app.

Maybe This is for name of html tag component

You employ in html something like this <mycomponent></mycomponent>

You should use this <app-mycomponent></app-mycomponent>

are you importing it in your app.module.ts like so and remove the directives bit:

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

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

Your MyComponentModule must be like this:

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