Angular 2 router-outlet within component template
<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>