Getting "'component' is not a known element" error in angular2
<p>I have two components in my Angular 2 app. <code>AppComponent</code> uses <code>MyComponent</code>:</p>

<blockquote>
  <p>app.component.ts :</p>
</blockquote>

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

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

      &lt;a href="http://google.co.in/"&gt;Google&lt;/a&gt;&lt;br/&gt;&lt;a href="http://www.facebook.com/"&gt;facebook&lt;/a&gt;&lt;br/&gt;&lt;a href="http://www.twitter.com"&gt;twitter&lt;/a&gt;

      &lt;ul&gt;&lt;li *ngFor="let name of names"&gt;{{name}}&lt;/li&gt;&lt;/ul&gt;

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

<hr>

<blockquote>
  <p>app.component2.ts :</p>
</blockquote>

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

<hr>

<blockquote>
  <p>app.module.ts :</p>
</blockquote>

<pre><code>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 {}
</code></pre>

<hr>

<p>When I run this, I get the following error:</p>

<blockquote>
  <p><strong><em>Error in console :</em></strong></p>
</blockquote>

<pre><code>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"&gt;twitter&lt;/a&gt;
              &lt;ul&gt;&lt;li *ngFor="let name of names"&gt;{{name}}&lt;/li&gt;&lt;/ul&gt;
              [ERROR -&gt;]&lt;my-comp&gt;&lt;/my-comp&gt;
"): AppComponent@4:14 ; Zone: &lt;root&gt; ; 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"&gt;twitter&lt;/a&gt;
              &lt;ul&gt;&lt;li *ngFor="let name of names"&gt;{{name}}&lt;/li&gt;&lt;/ul&gt;
              [ERROR -&gt;]&lt;my-comp&gt;&lt;/my-comp&gt;
"): AppComponent@4:14 {stack: (...), message: "Template parse errors:↵'my-comp' is not a known el…RROR -&gt;]&lt;my-comp&gt;&lt;/my-comp&gt;↵"): AppComponent@4:14"}
</code></pre>

<p>How can I resolve this?</p>