ошибка -> труба 'фильтр' не может быть найдена при использовании angular4

Question

Я выполняю модульное тестирование в развернутом проекте angular4 -node.js. И во время тестирования я обнаружил эту ошибку -

Template parse errors:
The pipe 'filter' could not be found ("
  </thead>
  <tbody>
    <tr *ngFor="let[ERROR ->] dat of result | filter:filterdata| 
paginate: { itemsPerPage: 5, currentPage: p };let i = index ">

поэтому я добавил эти два модуля в мои файлы module.ts и spec.ts ->

import { PipesModule } from '../../pipes/pipes.module';
import { Pipe, PipeTransform } from '@angular/core';

@NgModule({
 imports: [PipesModule
 ],

И для этого конкретного модуля импорта ->

import { PipesModule } from '../../pipes/pipes.module';

Ошибка -> Не удается найти модуль '../../pipes/pipes.module'.

Пожалуйста, помогите решить проблему

Answer 1

В Angular хорошим методом для совместного использования общих директив, компонентов, каналов и т. Д. Является использование так называемого общего модуля.

Эти модули объявляют и экспортируют общие части, чтобы их можно было использовать для любых других ваших модулей.

// other imports
import { filterPipe} from './{your-path}';

@NgModule({
  imports: [
    // dep modules
  ],
  declarations: [ 
    filterPipe
  ],
  exports: [
    filterPipe
  ]
})
export class PipesModule {}

, а затем

mport созданный модуль ApplicationPipesModule в модули, где будет использоваться ваш канал, добавив его в массив импорта

// other imports
import { PipesModule } from './{your-path}';   

    @NgModule({
     imports: [
       // other dep modules
       PipesModule 
     ],
     declarations: [],
     exports: []
    })
    export class MyModule1 {}

Answer 2

Здравствуйте. Вот пример, который вы можете проверить.

App.module.ts

import { NgModule, Component, Injectable  } from '@angular/core';
import { LimitToPipe } from './pipes/limit-to.pipe'; // your pipe path 

@NgModule({
 declarations: [
   LimitToPipe
 ]
});

Создать limit-to.pipe.ts

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

    @Pipe({
      name: 'limitTo'
    })
    export class LimitToPipe implements PipeTransform {

    transform(value: string, args: string): string {
        const limit = args ? parseInt(args, 10) : 10;
        const trail = '...';
        return value.length > limit ? value.substring(0, limit) + trail : value;
      }
    }

импорт в ваш компонент

 import { LimitToPipe } from '../pipes/limit-to.pipe';

в вашем html

{{ name | limitTo :60 : 0 }}

Юнит-тест (limit-to.pipe.spec.ts)

    import { LimitToPipe } from './limit-to.pipe'; // your custom pipe path

    describe('Pipe: LimitTo', () => {
      let pipe: LimitToPipe;

      beforeEach(() => {
        pipe = new LimitToPipe();
      });

      it('show 3 dot when string length is grater ther 15 chartacter', () => {
        expect(pipe.transform('my name is vikram sharma', '15')).toBe('my name is vikr...');
      });

      it('show full string when string length is less then 15 character', () => {
        expect(pipe.transform('my name is vikram sharma', '200')).toBe('my name is vikram sharma');
      });
    });

Answer 3

Вы должны включить FilterPipe в объявления и экспорт вашего PipesModule.