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

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

Answer 2

In your components.module.ts you should import IonicModule like this:

import { IonicModule } from '@ionic/angular';

Then import IonicModule like this:

  imports: [
    CommonModule,
    IonicModule
  ],

so your components.module.ts will be like this:

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

Answer 3

Check your selector in your filename.component.ts

Using the tag in various html files I would say

<my-first-component></my-first-component>

Should be

<app-my-first-component></app-my-first-component>

Example

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

Answer 4

You must declare your MyComponentComponent in the same module of your AppComponent.

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

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

Answer 5

Maybe This is for name of html tag component

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

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

Answer 6

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