title: Angular2 Template Parse Errors EOF
body: <p>In Angular2 (beta 13) I am attempting to display a list of data items retrieved from a database.  This part is working fine.</p>
  
  <p>However, when I attempt to display these items (application names) in a html table, it does not work.  Strangely it does works when displaying this within a list.</p>
  
  <p><strong>Error message</strong></p>
  
  <pre><code>EXCEPTION: Template parse errors:
  Unexpected character "EOF" ("
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div[ERROR -&gt;]"): ApplicationsComponent@13:5
  </code></pre>
  
  <p><strong>applications.html (CAUSES ERROR ABOVE)</strong></p>
  
  <pre><code>&lt;div class="route-container route-container-margin-0 route-container-width-standard"&gt;
      &lt;div class="route-container-padding-standard"&gt;
          &lt;p&gt;hello world&lt;/p&gt;
          &lt;table&gt;
              &lt;tbody&gt;
                  &lt;tr *ngFor="#app of applications"&gt;
                      &lt;td &gt;
                          {{app.name}}
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>applications.html (WORKS WITHOUT ERROR)</strong></p>
  
  <pre><code>&lt;div class="route-container route-container-margin-0 route-container-width-standard"&gt;
      &lt;div class="route-container-padding-standard"&gt;
          &lt;p&gt;hello world&lt;/p&gt;
          &lt;ul&gt;
              &lt;li *ngFor="#app of applications"&gt;
                  {{app.name}}
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>boot.ts</strong></p>
  
  <pre><code>///&lt;reference path="./../node_modules/angular2/typings/browser.d.ts"/&gt;
  import {bootstrap}      from 'angular2/platform/browser';
  import {ROUTER_PROVIDERS} from 'angular2/router';
  
  import 'rxjs/Rx'; // kitchen sink
  
  import {AppComponent} from './app.component';
  import {HTTP_PROVIDERS}    from 'angular2/http';
  
  
  // Bootstrap the application and reference the required directives
  bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS]);
  </code></pre>
  
  <p>Thank you, Dan.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This is the data I am attempting to display (preferred to as app):</p>
  
  <pre><code>[{"applicationID":1,"name":"Applications","description":"Web applications","applicationRef":"Applications","status":true,"icon":"fa fa-th-large","iconColour":"ffffff","applicationColour":"ffffff","routerLink":"Applications","applicationFeatures":null}, .... more here]
  </code></pre>
  
  <p>This is my component (almost identical to the one that works).
  The component that works is included on the page by way of tag e.g. , whereas the one that doesn't work is served via route traversal.</p>
  
  <pre><code>import {Component, OnInit} from 'angular2/core';
  
  import {ApplicationVM} from '../ViewModels/Application.ViewModel';
  import {ApplicationService}   from '../Services/application.service';
  
  @Component({
      selector: 'ApplicationList',
      templateUrl: './app/Applications/Components/applications.html',
      providers: [ApplicationService]
  })
  export class ApplicationsComponent implements OnInit {
  
      constructor(private _applicationService: ApplicationService) { }
  
      errorMessage: string;
      applications: ApplicationVM[];
  
      ngOnInit() {
          console.log("INIT");
          this.getApplications();
      }
  
      listApps() {
          this.getApplications();
      }
  
      getApplications() {
          this._applicationService.getApplications()
              .subscribe(
              apps =&gt; this.applications = apps,
              error =&gt; this.errorMessage = &lt;any&gt;error);
      }
  
  }
  </code></pre>