角2 Typescriptパイプフィルターが動作しません

Question

私は検索したい* ngModelの値を検索テキストを介してngModelのテキストボックス、私はデクイindexeddbラッパーからngForをバインドしています。 私のプログラムを実行しているときに何らかのエラーが発生した場合は、以下のようなエラーが表示されています。

search.htmlのページ：

<div id="custom-search-input"> 
       <div class="input-group col-sm-12"> 
        <input type="text" class="form-control" placeholder="Search" [(ngModel)]="searchtext" /> 
         <span class="input-group-btn"> 
          <button class="btn btn-info" type="button"> 
           <i class="glyphicon glyphicon-search"></i> 
          </button> 
         </span> 
       </div> 
      </div> 
      <br> 
      // here i'm using pipe filter 
      <div class="card" *ngFor="let group of listgroups | filter: searchtext"> 
      <div class="card-header card-default col-sm-4 col-md-4 col-lg-4"><a>&nbsp;{{ group.GroupID }}</a> 
      </div> 
      <div class="card-block"> 
      <p class="glyphicon glyphicon-user card-text card-default col-sm-8 col-md-8 col-lg-8">&nbsp; 
       {{ group.GroupName }} </p> 
      </div> 
      </div> 

component.tsページ：

import { Component,Pipes,PipeTransform } from '@angular/core'; 
    import { SearchGroupService } from 'app/Services/searchgroup.service'; 
    import { Router } from '@angular/router'; 
    import { FilterPipe } from './filter.pipe'; 


    @Component({ 
     selector : 'search', 
     templateUrl : 'app/Views/searchgroup.html', 
     pipes: [FilterPipe], 
     providers: [SearchGroupService] 
    }) 

    export class SearchGroupComponent implements PipeTransform { 
     id: id = []; 
     x: any; 
     name: name = []; 
     totalcount: any; 
     constructor(public rotuer: Router){ 
     // this._searchgroupservice.getGroupService();private _searchgroupservice: SearchGroupService 
     // console.log(this._searchgroupservice.BindGroupDetails()); 
     // this._searchgroupservice.BindGroupDetails(); 
     // this.router = Router; 
     // var _this = this; 
     // this.router = router; 

     } 

filter.pipe.tsページ

import { Pipe,PipeTransform } from '@angular/core'; 

    @Pipe({ 
     name: 'filter' 
    }) 

    export class FilterPipe implemnts PipeTransform{ 

     transform(listgroups:any, searchtext:any):any { 
      var searchtext = this.searchtext; 
      var listgroups = this.listgroups; 
      if(searchtext === undefined) return listgroups; 

      return listgroups.filter(function(listgroups){ 
       return listgroups.GroupID.toLowerCase().includes(searchtext.toLowerCase()); 
      }) 
     } 
    } 

の

エラー：

TypeScript transpiling to CommonJS, consider setting module: "system" in typescriptOptions to transpile directly to System.register format npmcdn.com/plugin-typescript@4.0.10/lib/logger:20 
    Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/…nesh/Project/AngType_20161017/Test%20Old/www/app/Components/filter.pipe.ts 
    Error: (SystemJS) XHR error (404 Not Found) loading http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/app/Components/filter.pipe.ts 
     Error: XHR error (404 Not Found) loading http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/app/Components/filter.pipe.ts 
      at ZoneDelegate.invoke (http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/node_modules/zone.js/dist/zone.js:203:28) 
      at Zone.runGuarded (http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/node_modules/zone.js/dist/zone.js:110:47) 
      at XMLHttpRequest.<anonymous> (http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/node_modules/zone.js/dist/zone.js:86:29) 
     Error loading http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/app/Components/filter.pipe.ts as "./filter.pipe" from http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp`enter code here`/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/app/Components/searchgroup.component.ts** 

Answer 1

私は問題はこのラインであると考えている：ここで

import { SearchGroupService } from 'app/Services/searchgroup.service';

あなたがいることを示している./または../のいずれかで起動しないファイルをインポートモジュールをインポートすることを意味しますが、この名前のモジュールは存在しません。

このファイルが存在しないため（404ステータスを参照）、アプリケーションをロードするときに問題が発生します。

編集答え

SystemJSは、コンポーネントディレクトリ内filter.pipe.tsファイルを見つけることができないことが表示されます。ファイルがどこにあるのは確かですか？そうでない場合は、インポートが正しくありません。あなたのコンポーネントで

あなたはこのインポートを持っている：

import { FilterPipe } from './filter.pipe'; 

これはfilter.pipe.tsは、コンポーネントの隣にComponentsフォルダ内にあることを意味します。しかし、SystemJSはファイルを見つけることができないと訴えています。

import { FilterPipe } from '../Pipes/filter.pipe'; 

私はそれが役に立てば幸い：私はあなたのインポートがこのようなものになるだろう意味でしょうPipesフォルダのようなもの、であなたのパイプを持っていると仮定します。