Angular2 管道 - 意外的令牌 <(..)答案

【问题标题】：Angular2 pipes - Unexpected token <(..)Angular2 管道 - 意外的令牌 <(..)
【发布时间】：2016-03-27 13:50:54
【问题描述】：

我想在我的 Angular 2 项目中添加用于搜索的管道，但问题是当我将创建的管道包含到组件浏览器日志中时，会显示 Unexpected token

    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

这是我的管道代码：

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

这是组件代码。

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

这些错误发生在我上次使用 http 时没有添加 http.dev.js 库。是否有一些用于包含管道的 JS 库或者我在其他方面错了？

【问题讨论】：

你确定SearchPipe所在的文件是searchpipe吗？
是的，我现在已将管道目录移动到 app/pipe，现在它已加载，但现在我收到消息 TypeError: Cannot read property 'filter' of null..

标签： angular angular2-routing angular2-directives

【解决方案1】：

Pipe 类型包含在 angular2/core 中，因此无需添加任何内容。

话虽如此，导入pipe/searchpipe时可能有问题。您需要检查从您要使用它的位置到达此模块的路径。

大多数情况下，在加载模块时，错误 Unexpected token <(…) 发生在 404 上。

【讨论】：

当我输入其他地址时，我在控制台日志中得到 404。所以模块正在加载。我正在使用 Angular 2（测试版 12）
我已经修复了所有问题。由于某种原因，我需要将管道文件夹移动到应用程序目录中，它不能与应用程序分开。
在我的情况下，我在尝试使用 Http form angular 时遇到了这个错误。事实上我忘了导入像这样的http js文件<script src="node_modules/angular2/bundles/http.dev.js"></script>。

【解决方案2】：

Angular 2 有关管道的某些信息目前不正确。

Angular 2 版本删除了“管道”声明： @Component({ pipes: [YourPipe], ... })

并将其移至（app.module.ts）： @NgModule({ ... declarations: [ YourPipe ], ... })

【讨论】：