title: router-outlet is not a known element
body: <p>The following code works:</p>
  
  <pre><code>/*app.module.ts*/
  import { NgModule } from '@angular/core';
  import { HttpModule } from '@angular/http';
  import { AppComponent } from './app.component';
  import { LetterRecall } from './letterRecall/letterRecall.component';
  
  @NgModule({
      imports:      [BrowserModule, HttpModule],
      declarations: [AppComponent, LetterRecall],
      bootstrap:    [AppComponent],
  })
  export class AppModule {}
  
  /*app.component.ts*/
  import {Component} from '@angular/core';
  @Component({
      selector: 'my-app',
      templateUrl: 'app/app.component.html'
  })
  export class AppComponent { }
  
  /*app.component.html*/
  &lt;h3&gt;Title&lt;/h3&gt;
  &lt;letter-recall&gt;&lt;/letter-recall&gt;
  </code></pre>
  
  <hr>
  
  <p>Following the Angular Routing Tutorial here: <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt5.html" rel="noreferrer">https://angular.io/docs/ts/latest/tutorial/toh-pt5.html</a></p>
  
  <p>I modified my code to:</p>
  
  <pre><code>/*index.html*/
  &lt;head&gt;
     &lt;base href="/"&gt;
  
  /*app.module.ts*/
  import { NgModule } from '@angular/core';
  import { HttpModule } from '@angular/http';
  import { RouterModule } from '@angular/router';
  import { AppComponent } from './app.component';
  import { LetterRecall } from './letterRecall/letterRecall.component';
  
  @NgModule({
      imports:      [BrowserModule, 
                     HttpModule,
                     RouterModule.forRoot([
                         { path: 'letters', component: LetterRecall }
                     ])],
      declarations: [AppComponent, LetterRecall],
      bootstrap:    [AppComponent],
  })
  export class AppModule {}
  
  /*app.component.ts*/
  import {Component} from '@angular/core';
  @Component({
      selector: 'my-app',
      templateUrl: 'app/app.component.html'
  })
  export class AppComponent { }
  
  /*app.component.html*/
  &lt;h3&gt;Title&lt;/h3&gt;
  &lt;a routerLink="/letters"&gt;Letters&lt;/a&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>At this point I get the following error: </p>
  
  <blockquote>
    <p>"Unhandled Promise rejection: Template parse errors: 'router-outlet'
    is not a known element:
    1. If 'router-outlet' is an Angular component, then verify that it is part of this module. ....."</p>
  </blockquote>
  
  <p>I am using the following versions:</p>
  
  <pre><code>    "@angular/common": "2.4.0",
      "@angular/compiler": "2.4.0",
      "@angular/core": "2.4.0",
      "@angular/forms": "2.4.0",
      "@angular/http": "2.4.0",
      "@angular/platform-browser": "2.4.0",
      "@angular/platform-browser-dynamic": "2.4.0",
      "@angular/router": "3.4.0"
  </code></pre>
  
  <hr>
  
  <p>All of the other answers on SO indicate I need to import RouterModule but as you can see above, I am doing this as prescribed in the tutorial. </p>
  
  <p>Any suggestions on where I can look for the source of this error? I started off using John Papa's First Look tutorial on PluralSight but it looks like that code is a little old now. That's when I stripped all of that out and went bare-bones through the tutorial and I get this error... I am not sure where to turn next. </p>