title: Why is my Angular 2 router not rendering my component?
body: <p>I am new to Angular 2, and am trying to get it to render a view component that holds other templates/components.  This is what I want rendered on the /home route. <strong>Problem</strong>: When I go to the /home route, it goes to a blank page rather than rendering my templates. There's no errors in the console.</p>
  
  <p>Here is my <strong>home.component.html</strong>:</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  
  &lt;container&gt;
    &lt;header-component&gt;&lt;/header-component&gt;
    &lt;check-portfolio&gt;&lt;/check-portfolio&gt;
    &lt;portfolio-carousel&gt;&lt;/portfolio-carousel&gt;
    &lt;skill-section&gt;&lt;/skill-section&gt;
    &lt;need-help&gt;&lt;/need-help&gt;
  &lt;/container&gt;
  </code></pre>
  
  <p><strong>home.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  export class HomeComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>Here are some parts of my <strong>app.module.ts</strong>. I'm not sure if I need anything in my <strong>app.component.html</strong>, but it's blank:</p>
  
  <pre><code>const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },
    {
      path: '',
      redirectTo: '/home',
      pathMatch: 'full'
    }
  ]
  
  @NgModule({
    declarations: [
      AppComponent,
      Container,
      Header,
      CheckPortfolioComponent,
      PortfolioCarouselComponent,
      SkillSectionComponent,
      NeedHelpComponent,
      FooterComponent,
      AboutComponent,
      HomeComponent,
      TitleNavComponent,
  
  
    ],
    imports: [
      BsDropdownModule.forRoot(),
      BrowserModule,
      CarouselModule.forRoot(),
      RouterModule.forRoot(
        appRoutes,
        { enableTracing: true }
      )
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Here is my index.html: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;LucidWebDream&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;script&gt;
      window.__theme = 'bs4';
    &lt;/script&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I've tried putting my home component into the bootstrap array, but had no luck as well.</p>
  
  <p>Update: Here is the git <a href="https://github.com/capozzic1/portfoliov2" rel="nofollow noreferrer">repo</a> if that helps: </p>