title: How to import component into another root component in Angular 2
body: <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>