How to import component into another root component in Angular 2
<p>I am trying to import component from one file another root component file.
it give error as ..</p>

<blockquote>
  <p>zone.js:484 Unhandled Promise rejection: Template parse errors:
  'courses' is not a known element:
  1. If 'courses' is an Angular component, then verify that it is part of this module.
  2. If 'courses' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<h1>My First Angular 2 App</h1>[ERROR ->]"): AppComponent@0:31 ; Zone:  ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
  'courses' is not a known element:</p>
</blockquote>

<p>My app.component.ts be like [root component file]</p>

<pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
import {CoursesComponent} from './courses.component';

@Component({
  selector: 'my-app',
  template: '&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;&lt;courses&gt;&lt;/courses&gt;',
  directives:[CoursesComponent],
})

export class AppComponent { }
</code></pre>

<p>and my courses.component.ts be ;</p>

<pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
@Component({
  selector: 'courses',
  template: '&lt;h1&gt;courses&lt;/h1&gt;'
})
export class CoursesComponent { }
</code></pre>

<p>while importing courses component from courses.component.ts file inside app.component i am not able declare directive inside <code>@Component{}</code></p>

<p><code>directives:[CoursesComponent]</code> giving error to me</p>

<p>Please advise solution over it.</p>