Угловой 2 трубы не найдена

Question

Я следовал этой ссылке, чтобы создать свое собственное время назад труба: Angular 2 "time ago" pipe

, но когда я впрыскиваюсь и использовал его, я увидел ошибку:

Template parse errors: The pipe 'timeAgo' could not be found

Ниже мой код , пожалуйста помогите мне разрешить эту проблему, много спасибо !!

timeAgo.pipe.ts

import { Pipe, ChangeDetectorRef } from '@angular/core'; 
import { AsyncPipe } from '@angular/common'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/interval'; 
import 'rxjs/add/operator/startWith'; 

@Pipe({ 
    name: 'timeAgo', 
    pure: false 
}) 
export class TimeAgoPipe extends AsyncPipe { 
    value: Date; 
    timer: Observable<string>; 

    constructor(private ref: ChangeDetectorRef){ 
     super(ref); 
    } 

    transform(obj: any, args?: any[]): any { 
     if(obj instanceof Date) { 
      this.value = obj; 

      if(!this.timer) { 
       this.timer = this.getObservable(); 
      } 
      return this.timer; 
     } 
     return this.transform(obj, args); 

    } 

    private getObservable(){ 
     const INTERVAL = 1000 * 45; 

     const ONE_MINUTE = 60; 
     const ONE_HOUR = 60 * 60; 
     const ONE_DAY = 60 * 60 * 24; 
     const ONE_MONTH = 60 * 60 * 24 * 30; 
     const ONE_YEAR = 60 * 60 * 24 * 30 * 12; 

     return Observable.interval(INTERVAL).startWith(0).map(() => { 
     // current time 
     let now = Date.now(); 

     // time since message was sent in seconds 
     let delta = (now - this.value.getTime())/1000; 

     // format string 
     if(delta < ONE_MINUTE) { 
      return 'just now';   
     } 
     if(delta < ONE_HOUR) { 
      return Math.floor(delta/ONE_MINUTE) + 'min(s) ago'; 
     } 
     if(delta < ONE_DAY) { 
      return Math.floor(delta/ONE_HOUR) + 'hour(s) ago'; 
     } 
     if(delta < ONE_MONTH) { 
      return Math.floor(delta/ONE_DAY) + 'day(s) ago'; 
     } 
     if(delta < ONE_YEAR) { 
      return Math.floor(delta/ONE_MONTH) + 'month ago'; 
     } 

     }); 
    } 
} 

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { enableProdMode, provide, PLATFORM_PIPES } from '@angular/core'; 
bootstrap(AppComponent, [ 
    APP_ROUTER_PROVIDERS, 
    provide(PLATFORM_PIPES, { 
    useValue: [TimeAgoPipe], 
    multi: true 
    }) 
]); 

post.component.html

<ul *ngIf="posts"> 
    <li *ngFor="let post of posts"> 
    {{ post.created_at | timeAgo}}  
    </li> 
</ul> 

Answer 1

Казалось бы, что PLATFORM_PIPES является устаревшим (https://github.com/angular/angular/blob/master/CHANGELOG.md) ,

Вы можете использовать метод, предусмотренный в этой статье, чтобы установить глобальную трубу: https://medium.com/@jecelynyeen/angular2-platform-pipes-globally-available-custom-pipe-will-be-deprecated-soon-c6ad16812c11#.ntmim1t9x

bootstrap(AppComponent, [ 
    provide(CompilerConfig, { 
    useValue: new CompilerConfig({ 
     platformPipes: [...COMMON_PIPES, TimeAgoPipe], 
     platformDirectives: [...COMMON_DIRECTIVES], 
     genDebugInfo: true 
    }) 
    }), 
]); 

Answer 2

Это происходит потому, что ваш TimeAgoPipe наследует от AsyncPipe. Я не знаю о поведении во время бета-сборки Angular2, но Angular 2.2.x постоянно не находит унаследованные классы @Component, @Pipe и @Directive во время компиляции шаблонов для меня.

Кажется, есть некоторые очень веские причины Angular2 не поддерживает наследование компонента: https://github.com/angular/angular/issues/7968

Если вы ищете TimeAgoPipe совместимый с угловыми 2.2, посмотрите на мою answer here или иметь прямой взгляд на gist.

Answer 3

Даже если я добавил MomentModule в качестве глобального импорта, я поставил

import { MomentModule } from 'angular2-moment'; 

и поставил я MomentModule как так

... 
imports: [ 
    ..., 
    MomentModule, 
    ..., 
] 

под соответствующий * .module.ts, в вашем случае это будет быть post.component.module.ts

, как сообщили в ссылке ниже

https://stackoverflow.com/questions/47182015/template-parse-the-pipe-could-not-be-found#=