title: angular2 - template not appearing
body: <p>I'm having a problem where the template in my app.component.ts and superheroes.ts won't load. (I'm doing a test project similar to the Angular Tour of Heroes tutorial, but with a Django backend.) The title (ie. "You are in the Hall of Heroes") will display, so clearly my app.components.ts file is being read, but the "Welcome!" is not loading, and neither is the list of superheroes. (<strong>edit</strong>: I also do not get any errors in the console when I run. Everything seems to be compiling correctly.)</p>
  
  <p><em>app.component.ts</em></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { HeroComponent } from './components/hero/superheroes'
  import { HeroService } from './services/heroService'
  
  @Component({
    selector: 'app-root',
    template: `&lt;div&gt;
             &lt;h1&gt;Welcome!&lt;/h1&gt;
             &lt;superheroes&gt;&lt;/superheroes&gt;
           &lt;/div&gt;`,
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = "You are in the Hall of Heroes";
  }
  </code></pre>
  
  <p><em>superheroes.ts</em></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HeroService } from '../../services/heroService'
  
  @Component({
    selector: 'superheroes',
    template: `
      &lt;ul&gt;&lt;li *ngFor="let hero of heroes"&gt;{{hero.name}}&lt;/li&gt;&lt;/ul&gt;
    `
  })
  export class HeroComponent implements OnInit {
    heroes: any[];
    error: any;
  
    constructor(private heroService: HeroService) { }
  
    getHeroes() {
      this.heroService
        .getHeroes()
        .then(heroes =&gt; this.heroes = heroes)
        .catch(error =&gt; this.error = error);
    }
  
    ngOnInit() {
      this.getHeroes();
    }
  }
  </code></pre>
  
  <p><em>heroService.ts</em></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  
  import 'rxjs/add/operator/toPromise';
  
  @Injectable()
  export class HeroService {
    private apiURL = 'http://localhost:8000/superheroes/?format=json';
  
    constructor(private http: Http) { }
  
    getHeroes() {
      return this.http.get(this.apiURL)
        .toPromise()
        .then(response =&gt; response.json())
        .catch(this.handleError);
    }
  
    private handleError(error: any) {
      console.error('An error occurred', error);
      return Promise.reject(error.message || error);
    }
  }
  </code></pre>
  
  <p><em>app.module.ts</em></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  
  import { HeroComponent } from './components/hero/superheroes';
  import { HeroService } from './services/heroService';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      HeroComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule
    ],
    providers: [HeroService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>I'm really scratching my head over this, but I can't shake the feeling that I'm missing something super obvious. If you need me to add any extra code/explain what I have, just say so and I'll edit my post, but I think this is good.</p>