title: How to declare a component in NgModule, when the component includes sub components ?
body: <p>In angular. How do you declare a component in a NgModule, when the components includes sub components ? </p>
  
  <p>An example of this</p>
  
  <p>app.module.ts:</p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppComponent }  from './app.component';
  import { NavbarComponent } from './components/navbar/navbar.component';
  import { TrackComponent } from './components/track/track.component';
  
  @NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, NavbarComponent, TrackComponent],
  bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>TrackComponent contains 3 sub components:</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {SkillComponent} from './skill-level/skilllevel.component';
  import {TrackheaderComponent} from './header/trackheader.component';
  
  @Component({
  moduleId: module.id,
  selector: 'trackelement',
  templateUrl: 'track.component.html'
  })
  
  export class TrackComponent {
  private title: string;
  
  constructor() {
      this.title = 'title';
    }
  }
  </code></pre>
  
  <p>I am using angular-cli (ng serve to test locally), but the console (and my IDE) are saying that TrackComponent hasn't been declared in any NgModule. </p>
  
  <p>I've tried a couple of things:</p>
  
  <ol>
  <li>Declaring all sub components in app.module.ts.</li>
  <li>Creating a new NgModule in TrackComponent.ts which exported the components.</li>
  </ol>
  
  <p>So my question is more precise this: 
  What is the RIGHT way to do this? - the right way to have a 'tree' of components. 
  I'm trying to follow good practice. </p>