title: Angular 2 router-outlet within component template
body: <p>I have been playing around with routes in Angular 2 but I have run into an issue that I cannot find an answer for. My routes are "working" but not the way I am hoping for. I am trying to use this like you would use ng-view from angular 1, my header and footer never change, and when my url changes new "stuff" is placed in my content.</p>
  
  <p>Here is what I have now which "works"</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { HeaderComponent } from './shared/header/header.component';
  import { ContentComponent } from './shared/content/content.component';
  import { FooterComponent } from './shared/footer/footer.component';
  import { TestComponent } from './components/test.component';
  import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
  
  @Routes([
      {path: '/test', component: TestComponent }
  ])
  @Component({
      selector: 'app',
      template: `&lt;header&gt;&lt;/header&gt;
      &lt;a [routerLink]="['/test']"&gt;Click for testComponent&lt;/a&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;footer&gt;&lt;/footer&gt;`,
      directives: [HeaderComponent, ContentComponent, FooterComponent, ROUTER_DIRECTIVES]
  })
  export class AppComponent { }
  </code></pre>
  
  <p>What I am trying to do is put the router outlet inside of my <code>ContentComponent</code>so that essentially the router just dumps the new stuff directly into the main area of my app. When I try to rewrite:<br>
  <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code><br>
  as <br>
  <code>&lt;content&gt;&lt;router-outlet&gt;&lt;/router-outlet&gt;&lt;/content&gt;</code><br>
   the routing stops working, no error message, just stops. I also do not see my testComponent in the DOM when I inspect it with the devtools. So I thought, well I will put the router-outlet inside the template of my <code>ContentComponent</code> like so:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'content',
      template: `&lt;router-outlet&gt;&lt;/router-outlet&gt;`
  })
  export class ContentComponent { }
  </code></pre>
  
  <p>However when I do this I get the error message: Cannot find default outlet.</p>
  
  <p>I am missing something but the lack of documentation makes it very difficult to figure out, I would think there would be a way to define within @Routes where my outlet is but again, can't find any documentation that isn't for the deprecated-router. Hope someone can shed some light on this. Thanks in advance.</p>
  
  <p>Note: general code critiques would also be helpful, I am very new to Angular 2 and would love the advice.</p>