title: Angular2: Error: unexpected value 'AppComponent' declared by the module 'AppModule'
body: <p>I'm working through the tutorial at <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt2.html">https://angular.io/docs/ts/latest/tutorial/toh-pt2.html</a> and get the following error after creating the array of heroes:</p>
  
  <pre><code>Error: Error: Unexpected value 'AppComponent' declared by the module 'AppModule'
      at new BaseException (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27)
      at eval (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13274:35)
      at Array.forEach (native)
      at CompileMetadataResolver.getNgModuleMetadata (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13261:53)
      at RuntimeCompiler._compileComponents (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:51)
      at RuntimeCompiler._compileModuleAndComponents (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:41)
      at RuntimeCompiler.compileModuleAsync (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:25)
      at PlatformRef_._bootstrapModuleWithZone (localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9991:29)
      at PlatformRef_.bootstrapModule (localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9984:25)
      at Object.eval (localhost:3000/app/main.js:4:53)
  Evaluating localhost:3000/app/main.js
  Error loading localhost:3000/app/main.js
  </code></pre>
  
  <p>My app.module.ts file at this point is:</p>
  
  <pre><code>import { NgModule }     from '@angular/core';
  import { BrowserModule }from '@angular/platform-browser';
  import { FormsModule }  from '@angular/forms';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
      imports:        [ BrowserModule, FormsModule ],
      declarations:   [ AppComponent ],
      bootstrap:      [ AppComponent ]
  })
  
  export class AppModule {}
  </code></pre>
  
  <p>My app.components.ts file at this point is:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  export class Hero {
      id: number;
      name: string;
   }
  
  @Component ({
      selector: 'my-app',
      template: `
          &lt;h1&gt;{{title}}&lt;/h1&gt;
  
          &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;        
  
           &lt;h2&gt;{{hero.name}} details!&lt;/h2&gt;
           &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{hero.id}}&lt;/div&gt;
           &lt;div&gt;
               &lt;label&gt;name: &lt;/label&gt;
               &lt;input [(ngModel)]="hero.name" placeholder="name"&gt;
           &lt;/div&gt; 
           ` 
   })
  
  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' }
  ];
  
  export class AppComponent {
      title = 'Tour or Heroes';
      heroes = HEROES;
  }
  </code></pre>
  
  <p>Everything was working up to this point.  New to Angular and not sure how to debug this.</p>
  
  <p>Edit:</p>
  
  <p>The error occurs in (index) at:</p>
  
  <pre><code>    &lt;!-- 2. Configure SystemJS --&gt;
      &lt;script src = "systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          System.import('app').catch(function(err) {
              console.error(err);
          });
      &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Thanks,</p>