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:
my-component
is an Angular component, then verify that it is part of this module.my-component
is a Web Component then add CUSTOM_ELEMENTS_SCHEMA
to the @NgModule.schemas
of this component to suppress this message. Please Help.
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