Getting "'component' is not a known element" error in angular2

Question

I have two components in my Angular 2 app. AppComponent uses MyComponent:

app.component.ts :

import { Component } from '@angular/core';
import { MyComponent } from './comp1/app.component2';

@Component({
    selector: 'my-app',
    directives: [MyComponent],
    template: `
      <h1>My First Angular 2 App</h1>  <h2>Welcome all!!!!</h2>

      <a href="http://google.co.in/">Google</a><br/><a href="http://www.facebook.com/">facebook</a><br/><a href="http://www.twitter.com">twitter</a>

      <ul><li *ngFor="let name of names">{{name}}</li></ul>

      <my-comp></my-comp>`
})
export class AppComponent {
    names: String[];
    constructor() {
        this.names = ["Praveen", "Naveen", "Nandini"];
    }
}

---

app.component2.ts :

import {Component} from '@angular/core'
@Component({
    selector: 'my-comp',
    templateUrl: 'app/comp1/my-component.html'
})
export class MyComponent {
    msg: String = "My Component ---- hurrayyyyyy!!!!!!";
}

---

app.module.ts :

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

---

When I run this, I get the following error:

Error in console :

Unhandled Promise rejection: Template parse errors:
'my-comp' is not a known element:
1. If 'my-comp' is an Angular component, then verify that it is part of this module.
2. If 'my-comp' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (".com">twitter</a>
              <ul><li *ngFor="let name of names">{{name}}</li></ul>
              [ERROR ->]<my-comp></my-comp>
"): AppComponent@4:14 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
'my-comp' is not a known element:
1. If 'my-comp' is an Angular component, then verify that it is part of this module.
2. If 'my-comp' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (".com">twitter</a>
              <ul><li *ngFor="let name of names">{{name}}</li></ul>
              [ERROR ->]<my-comp></my-comp>
"): AppComponent@4:14 {stack: (...), message: "Template parse errors:↵'my-comp' is not a known el…RROR ->]<my-comp></my-comp>↵"): AppComponent@4:14"}

How can I resolve this?

Answer 1

You need to import and declare MyComponent in app.module file as shown below,

NOTE: Also remove directives : [MyComponent] from AppComponent

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { MyComponent } from './comp1/app.component2';  //<----here

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,MyComponent],           //<-----here
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 2

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

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  schemas:      [CUSTOM_ELEMENTS_SCHEMA] // <<<=== add this line
})
export class AppModule { }