title: angular2: Uncaught SyntaxError: Unexpected token <
body: <p>I keep getting this error <code>Uncaught SyntaxError: Unexpected token &lt;</code> whenever I try to run my angular2 application. This is just a modification based on the <a href="https://angular.io/docs/ts/latest/guide/router.html" rel="nofollow noreferrer">routing 'tutorial'</a> of the angular2 website. </p>
  
  <p>Normally these kind of errors speak for themselves where I miswrote a piece of code. But the Chrome console tells me the <a href="https://picasaweb.google.com/lh/photo/st39nlTuYPSQ-i4PCZeA2SOBG2bGE-R0SjQZqsLNf_4" rel="nofollow noreferrer">error</a> occurs inside of an angular2 js file. </p>
  
  <p>Reading and trying the answers from both <a href="https://stackoverflow.com/questions/5733275/chrome-uncaught-syntax-error-unexpected-token-illegal"><code>Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL</code></a>  and <a href="https://stackoverflow.com/questions/10501634/warning-c4819-how-to-find-the-character-that-has-to-be-saved-in-unicode"><code>warning C4819: How to find the character that has to be saved in unicode?</code></a> didn't work. Guessing that the error has to be somewhere in my boot.ts or app.component.ts.</p>
  
  <p><strong>boot.ts</strong></p>
  
  <pre><code>import {bootstrap}        from 'angular2/platform/browser';
  import {ROUTER_PROVIDERS} from 'angular2/router';
  import {AppComponent}     from './app.component';
  import {HallService}     from './hall/hall.service';
  bootstrap(AppComponent,[
      ROUTER_PROVIDERS,
      HallService
  ]);
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
  import {HallCenterComponent} from './hall/hall-center.component';
  
  @Component({
      selector: 'my-app',
      template: `
      &lt;h1 class="title"&gt;Component Router&lt;/h1&gt;
      &lt;a [routerLink]="['HallCenter']"&gt;Hallen&lt;/a&gt;
      &lt;a&gt;Heroes&lt;/a&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
      directives: [ROUTER_DIRECTIVES]
  })
  @RouteConfig([
      {
          path: '/hall/...',
          name: 'HallCenter',
          component: HallCenterComponent,
          useAsDefault: true
      }
  ])
  export class AppComponent { }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;base href="/"&gt;
      &lt;title&gt;Factory project&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular2/bundles/router.dev.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          System.config({
              packages: {
                  app: {
                      format: 'register',
                      defaultExtension: 'js'
                  }
              }
          });
          System.import('app/boot')
                  .then(null, console.error.bind(console));
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;my-app&gt;loading...&lt;/my-app&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>hall-center.component.ts</strong></p>
  
  <pre><code>import {Component}     from 'angular2/core';
  import {RouteConfig, RouterOutlet} from 'angular2/router';
  import {HallListComponent}   from './hall-list.component';
  import {HallDetailComponent} from './hall-detail.component';
  import {HallService}         from './hall.service';
  
  @Component({
      template:  `
      &lt;h2&gt;HALL CENTER&lt;/h2&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
      directives: [RouterOutlet],
      providers:  [HallService]
  })
  @RouteConfig([
      {path:'/',         name: 'HallCenter', component: HallListComponent, useAsDefault: true},
      {path:'/:id',      name: 'HallDetail', component: HallDetailComponent},
      {path:'/list/:id', name: 'HallList',   component: HallListComponent}
  ])
  export class HallCenterComponent { }
  </code></pre>