Angular2管道-意外令牌<（..）

Question

I wanted to add pipe for search in my Angular 2 project but the problem is that when i include the created pipe into component browser logs shows me Unexpected token <(..) error. Full log:

    angular2-polyfills.js:332 
Error: SyntaxError: Unexpected token <(…)
ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576Z
oneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434

Here is my pipe code:

    import {Pipe} from 'angular2/core';

@Pipe({
  name: 'SearchPipe'
})

export class SearchPipe {

   transform(items: any[], args: any[]): any {
        return items.filter(item => item.name.indexOf(args[0]) != -1);
   }
}

And here is component code.

 import { Component, Directive } from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {SearchPipe} from 'pipe/searchpipe';
import 'rxjs/Rx';


@Component({ 
  pipes: [SearchPipe],
  selector: 'MainPage', 
  templateUrl: 'app/mainpage/mainpage.html'
})

export class MainPageComponent { 
    korisnici: Object[];
    constructor(http: Http){
        http.get('korisnici.json')
        .map(res => res.json())
        .subscribe(korisnici => this.korisnici = korisnici);
    }
}

These error happened for me last time when i was using http without adding http.dev.js library. Is there some JS library for including pipes or i am wrong on something else?

Answer 1

The Pipe type is included into angular2/core so there is nothing more to add.

That being said, perhaps there is a problem when importing pipe/searchpipe . You need to check the path to reach this module from where you want to use it.

Most of time the error Unexpected token <(…) occurs on a 404 when loading a module.

Answer 2

Some of the Anglar 2 information on pipes is currently incorrect.

Angular 2 release removed the 'pipes' declaration in: @Component({ pipes: [YourPipe], ... })

And moved it to (app.module.ts): @NgModule({ ... declarations: [ YourPipe ], ... })