Angular 2 component inside other component
<p>Creating an RPG character creator. </p>

<p>I have a NewCharacterComponent and I am trying to implement a DieInputComponent inside it. The NewCharacterComponent is routed from an AppComponent. Important snippets of the code will be below.</p>

<p>The issue I am running into is that I am not getting the DieInputComponent to load within the NewCharacterComponent. When I break the DieInputComponent code no errors are thrown in the console, so the error is likely that I am just not successfully importing the DieInputComponent but I just have no idea what is going wrong.</p>

<p>new-character.component.ts</p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';

import { DieInputComponent } from './die-input.component';

@Component({
  selector: 'core-worlds',
  templateUrl: 'app/new-character.component.html',
  styleUrls: ['app/new-character.component.css'],
})

export class NewCharacterComponent {
  constructor() { }
}
</code></pre>

<p>new-character.component.html </p>

<pre><code>&lt;h2&gt;New Character&lt;/h2&gt;
&lt;die-input&gt;&lt;/die-input&gt;
</code></pre>

<p>die-input.component.ts</p>

<pre><code>import { Component } from '@angular/core';

@Component({
    selector: 'die-input',
    templateUrl: 'app/die-input.component.html',
    styleUrls: ['app/die-input.component.css'],
})

export class DieInputComponent {
    constructor() { }
}
</code></pre>

<p>die-input.component.html</p>

<pre><code>&lt;input type="number" placeholder="1d4"&gt;&lt;/input&gt;
</code></pre>