Angular2 unexpected parser error token

Question

Creating an angular2 application using angular 2 seed BS4. The component uses the channel and it worked when I played with angular2 Quickstart but did not use Angular2 -Seed-BS4

When I run, I get: -

> EXCEPTION: Template parse errors: Parser Error: Unexpected token | at column 32 in [ngFor let awsoffer of awsoffers| keys2] in > AWSOfferListComponent@2 :9 ("<h3>AWS Offer List Elements:</h3> <ul> > <table [ERROR ->]*ngFor="let awsoffer of awsoffers| keys2"> > <th>{{awsoffer.key}}</th> > <div *ngFor="let awso2 o"): AWSOfferListComponent@2 :9 Parser Error: Unexpected token . at column 28 in [ngFor let awso2 of > awsoffer.value| keys2] in AWSOfferListComponent@4 :9 (" <table > *ngFor="let awsoffer of awsoffers| keys2"> > <th>{{awsoffer.key}}</th> > <div [ERROR ->]*ngFor="let awso2 of awsoffer.value| keys2"> > <tr> > <td>{{awso2.key}}</td> "): AWSOfferListComponent@4 :9 

I had this code working outside of an angular project, so I should have something wrong when moving the logic inside the structure, but I don't see what it is. A google search seems to indicate that this is because the pipe module is not loading, but it seems that there are no 404 errors.

Component: -

 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 => this.awsoffers = awsoffers, error => this.errorMessage = <any>error); } } 

Template: -

 <h3>AWS Offer List Elements:</h3> <ul> <table *ngFor="let awsoffer of awsoffers| keys2"> <th>{{awsoffer.key}}</th> <div *ngFor="let awso2 of awsoffer.value| keys2"> <tr> <td>{{awso2.key}}</td> <td>{{awso2.value}}</td> </tr> </div> </table> </ul> 

Pipe Definition: -

 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; } } 

Screenshot of the project structure.

Any ideas?

Thanks in advance

Answer 1

Only with beta.17 version can you write:

 <div *ngFor="let item of items"> // let instead of # 

Since Angular2 -Seed-BS4 uses angular beta.2 ( https://github.com/start-angular/SB-Admin-BS4-Angular-2/blob/master/package.json#L90 ), you should write here So:

 <table *ngFor="#awsoffer of awsoffers | keys2"> ... <div *ngFor="#awso2 of awsoffer.value | keys2"> 

This link may be of interest to you https://github.com/angular/angular/blob/master/CHANGELOG.md#user-content-200-beta17-2016-04-28