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

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


        

Answer 1

1. Declare your MyComponentComponent in MyComponentModule
2. Add your MyComponentComponent to exports attribute of MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

3. Add your MyComponentModule to your AppModule imports attribute

app.module.ts

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

Important If your still have that error, Stop your server ctrl+c from terminal, and run it again ng serve -o

Answer 2

Check which module the parent component is being declared in...

If your parent component is defined in the shared module, so must your child module.

The parent component could be declared in a shared module and not the module that is logical based on the file directory structure / naming, even the Angular CLI added it into the wrong module in my case.

Answer 3

Had the same issue, found that the template component tags worked with <app-[component-name]></app-[component-name]>. So, if your component is called mycomponent.component.ts:

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

Answer 4

This might be late ,but i got the same issue but I rebuild(ng serve) the project and the error was gone

Answer 5

Don't export **default** class MyComponentComponent!

Related issue that might fall under the title, if not the specific question:

I accidentally did a...

export default class MyComponentComponent {

... and that screwed things up too.

Why? VS Code added the import to my module when I put it into declarations, but instead of...

import { MyComponentComponent } from '...';

it had

import MyComponentComponent from '...';

And that didn't map up downstream, assumedly since it wasn't "really" named anywhere with the default import.

export class MyComponentComponent {

No default. Profit.

Answer 6

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 should be like this:-

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