title: Angular: Why doesn't show anything in html page?
body: <p>This is my heroes.component.html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!--The content below is only a placeholder and can be replaced.--&gt;
  &lt;div style="text-align:center"&gt;
      &lt;h1&gt;
          &lt;h2&gt;{{hero.name}} Details&lt;/h2&gt;
          &lt;div&gt;&lt;span&gt;id: &lt;/span&gt;{{hero.id}}&lt;/div&gt;
          &lt;div&gt;&lt;span&gt;name: &lt;/span&gt;{{hero.name}}&lt;/div&gt;
          &lt;app-heroes&gt;&lt;/app-heroes&gt;
      &lt;/h1&gt;
      &lt;img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="&gt;
  &lt;/div&gt;
  &lt;h2&gt;Here are some links to help you start: &lt;/h2&gt;
  </code></pre>
  
  <p>This is my heroes.component.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Hero } from '../hero';
  
  @Component({
      selector: 'app-heroes',
      templateUrl: './heroes.component.html',
      styleUrls: ['./heroes.component.css']
  })
  export class HeroesComponent implements OnInit {
      hero: Hero = {
          id: 1,
          name: 'Windstorm'
      };
  
      constructor() { }
  
      ngOnInit() { }  
  }
  </code></pre>
  
  <p>Finally this is my app.module.ts:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { HeroesComponent } from './heroes/heroes.component';
  
  @NgModule({
      declarations: [
          AppComponent,
          HeroesComponent
      ],
      imports: [
          BrowserModule
      ],
      providers: [],
      bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>The browser should refresh and display the HeroesComponent's content, but it's showing AppComponent's content. What do I do next to solve my problem?</p>