title: "mock-heroes.ts' is not a module" error from official Angular doc
body: <p>I'm trying to follow the official Angular doc:</p>
  
  <p><a href="https://angular.io/tutorial/toh-pt2" rel="nofollow noreferrer">https://angular.io/tutorial/toh-pt2</a></p>
  
  <p>but can't proceed due to this error:</p>
  
  <p>Failed to compile.</p>
  
  <pre><code>C:/Users/username/Desktop/my-app/src/app/heroes/heroes.component.ts (3,24): 
  File 'C:/Users/username/Desktop/my-app/src/app/mock-heroes.ts' is not a module.
  </code></pre>
  
  <p>My code is exactly the same as in the tutorial, this is really frustrating conming from the official doc and makes me not even want to learn angular :( Anyone have any idea how to get past it?</p>
  
  <p><strong>mock-heroes.ts:</strong></p>
  
  <pre><code>import { Hero } from './hero';
  
  export const HEROES: Hero[] = [
    { id: 11, name: 'Mr. Nice' },
    { id: 12, name: 'Narco' },
    { id: 13, name: 'Bombasto' },
    { id: 14, name: 'Celeritas' },
    { id: 15, name: 'Magneta' },
    { id: 16, name: 'RubberMan' },
    { id: 17, name: 'Dynama' },
    { id: 18, name: 'Dr IQ' },
    { id: 19, name: 'Magma' },
    { id: 20, name: 'Tornado' }
  ];
  </code></pre>
  
  <p><strong>hero.ts:</strong></p>
  
  <pre><code>export class Hero {
    id: number;
    name: string;
  }
  </code></pre>
  
  <p><strong>heroes.components.ts:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Hero } from '../hero';
  import { HEROES } from '../mock-heroes';
  
  @Component({
    selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']
  })
  
  export class HeroesComponent implements OnInit {
  
      heroes = HEROES;
  
      constructor() { }
  
      ngOnInit() {
      }
  
  }
  </code></pre>
  
  <p><strong>heroes.component.html:</strong></p>
  
  <pre><code>&lt;h2&gt;My Heroes&lt;/h2&gt;
  &lt;ul class="heroes"&gt;
    &lt;li *ngFor="let hero of heroes"&gt;
      &lt;span class="badge"&gt;{{hero.id}}&lt;/span&gt; {{hero.name}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>