title: Angular2 parser error unexpected token
body: <p>Creating an angular2 app using angular 2 seed BS4.
  The component uses a pipe and it worked when i was playing with the Angular2 Quickstart but doesnt when using <a href="https://github.com/start-angular/SB-Admin-BS4-Angular-2" rel="noreferrer">Angular2-Seed-BS4</a></p>
  
  <p>When i run i get:-</p>
  
  <pre><code>&gt;     EXCEPTION: Template parse errors: Parser Error: Unexpected token | at column 32 in [ngFor let awsoffer of awsoffers| keys2] in
  &gt; AWSOfferListComponent@2:9 ("&lt;h3&gt;AWS Offer List Elements:&lt;/h3&gt; &lt;ul&gt;  
  &gt; &lt;table [ERROR -&gt;]*ngFor="let awsoffer of awsoffers| keys2"&gt;
  &gt;     &lt;th&gt;{{awsoffer.key}}&lt;/th&gt;
  &gt;     &lt;div *ngFor="let awso2 o"): AWSOfferListComponent@2:9 Parser Error: Unexpected token . at column 28 in [ngFor let awso2 of
  &gt; awsoffer.value| keys2] in AWSOfferListComponent@4:9 ("   &lt;table
  &gt; *ngFor="let awsoffer of awsoffers| keys2"&gt;
  &gt;     &lt;th&gt;{{awsoffer.key}}&lt;/th&gt;
  &gt;     &lt;div [ERROR -&gt;]*ngFor="let awso2 of awsoffer.value| keys2"&gt;
  &gt;     &lt;tr&gt;
  &gt;     &lt;td&gt;{{awso2.key}}&lt;/td&gt; "): AWSOfferListComponent@4:9
  </code></pre>
  
  <p>I have had this code work outside of the angular-seed project so I must have something wrong when moving the logic to within the structure - but i cant see what it is. Searching google seems to indicate that its to do with the pipe module not being loaded but it appears that it is - no 404 errors.</p>
  
  <p>Component:-</p>
  
  <pre><code>import { Component, OnInit } from 'angular2/core';
  import { AWSOfferService } from '../../../shared/services/aws-offer.service';
  import { AWSOffer } from './aws-offer';
  import { KeysPipe } from '../../../shared/pipes/keys.pipe';
  import { KeysMultPipe } from '../../../shared/pipes/keys2.pipe';
  
  
  
  
  @Component({
    selector: 'aws-offer-list',
    templateUrl: './pages/aws-offers/components/aws-offer-list.html',
    styles: ['.th {color:red;}'],
    pipes : [KeysPipe, KeysMultPipe]
  })
  
  export class AWSOfferListComponent implements OnInit {
    constructor (private AWSOfferService: AWSOfferService) {}
    errorMessage: string;
    awsoffers: AWSOffer[];
    ngOnInit() { this.getAWSOffers(); }
  
    getAWSOffers() {
        this.AWSOfferService.getAWSOffers().subscribe(awsoffers =&gt; this.awsoffers = awsoffers,
                                          error =&gt;  this.errorMessage = &lt;any&gt;error);
    }
  }
  </code></pre>
  
  <p>Template:-</p>
  
  <pre><code>&lt;h3&gt;AWS Offer List Elements:&lt;/h3&gt;
  &lt;ul&gt;
    &lt;table *ngFor="let awsoffer of awsoffers| keys2"&gt;
      &lt;th&gt;{{awsoffer.key}}&lt;/th&gt;
      &lt;div *ngFor="let awso2 of awsoffer.value| keys2"&gt;
      &lt;tr&gt;
      &lt;td&gt;{{awso2.key}}&lt;/td&gt;
      &lt;td&gt;{{awso2.value}}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/div&gt;
    &lt;/table&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Pipe definition:-</p>
  
  <pre><code>import { PipeTransform, Pipe } from 'angular2/core';
  
  @Pipe({name: 'keys2'})
  export class KeysMultPipe implements PipeTransform {
    transform(value, args:string[]) : any {
      let keys = [];
      for (let key in value) {
        keys.push({key: key, value: value[key]});
      }
      return keys;
    }
  }
  </code></pre>
  
  <p>Screen shot of the project structure.
  <a href="https://i.stack.imgur.com/u5CKT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/u5CKT.png" alt="File structure"></a></p>
  
  <p>Any ideas?</p>
  
  <p>Thanks in advance</p>