Ionic 2 Pipes - Uncaught Error: No Directive annotation found on MapToIterable(…)

Question

I've been having an issue trying to use pipes in Ionic 2. Here is my error:

Uncaught Error: No Directive annotation found on MapToIterable(…)

I've generated a pipe using the Ionic 2 CLI and have edited it to accomplish some functionality where I can iterate over an object of objects, via *ngFor. Here is my Pipe code:

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

@Pipe({
  name: 'mapToIterable'
})
@Injectable()
export class MapToIterable  {
  transform(value: any): any {
    if(value === null) {
      return null;
    } else {
      return Object.keys(value).map(key => value[key]);
    }
  }
}

Here is the *ngFor loop in my template:

<div *ngFor="let video of (user.videos | mapToIterable)">
        <img src="{{video.thumbnail}}" />
      </div>

I'm not sure why I'm getting this issue. I've imported the Pipe correctly inside of my @NgModule declarations, yet no matter anything else I've tried, I still run into this error.

Does anyone have any idea?

Thanks!

That's what the Ionic 2 CLI generated when I ran ionic g pipe map-to-iterable — Stevie Star
Oh right! It's a while since I've used Ionic 2, in plain Angular 2 you'd use just @Pipe, and @Injectable is for e.g. services. — jonrsharpe
No problem :) However, when I remove the @Injectable decorator, it still gives me the same error :/ I have no idea this thing's problem is heh — Stevie Star
Could you please add how are you importing it in the page where that ngFor is? — sebaferreras

KaFu KaFu · Accepted Answer · 2017-01-02T18:20:50

You could try to only import your Pipe in declaration array of app.module.ts and NOT in entryComponents for the ionic pages. This works for me.

@NgModule({
declarations: [
    AppComponent,
    ...,
    YourPipe
],
imports: [
    IonicModule.forRoot(AppModule)
],
bootstrap: [IonicApp],
entryComponents: [
    AppComponent,
    ...
],

Ionic 2 Pipes - Uncaught Error: No Directive annotation found on MapToIterable(…)

1 Answers