app.module.ts can't find name of pipe

Question

I'm trying to create a simple app using Angular 2, and am having trouble using Pipe decorator. I am using Pipe to access the key,values of data, which I was able to do quite easily in Angular 1. In order to implement this using PIPE, I pretty much copied a template posted in a related SO question except for my app.module.ts.

ERROR in /Users/me/thisapp/mybio/src/app/app.module.ts (20,5): Cannot find name 'KeysPipe'.)

I tried copying the name of Pipe inside my app.module.ts declarations, but this didn't solve the issue. Overall, I am pretty lost about how the Component, Module, and pipe.ts file interact.I would appreciate any help, and if you could explain the problem .

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Pipe, PipeTransform } from '@angular/core';
import { routes } from './app.router';
import { AppComponent } from './app.component';
import { AppResumeComponent } from './app-resume/app-resume.component';
import { EducationComponent } from './education/education.component';
import { WorkxpComponent } from './workxp/workxp.component';
import { LaughComponent } from './laugh/laugh.component';

@NgModule({
  declarations: [
    AppComponent,
    AppResumeComponent,
    EducationComponent,
    WorkxpComponent,
    LaughComponent,
    KeysPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

pipe.ts

@Pipe({name:'keys'})
export class KeysPipe implements PipeTransform {
    transform(value,args:string[]) : any {
    let keys = [];
    for (let key in value){
        keys.push({key: key, value: value[key]});
    }
    return keys
}
}

laugh.component.ts

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


import {KeysPipe} from './pipe'

@Component({
    selector: 'my-app',
    templateUrl: 'laugh.component.html',
})
export class LaughComponent { 

  demo = {
    'key1': 'ANGULAR 2',
    'key2': 'Pardeep',
    'key3': 'Jain',
  }
}

score 3 · Accepted Answer · answered Feb 24 '17 at 05:54

3

You need to add the import to the module.ts

import {KeysPipe} from './pipe'

answered Feb 24 '17 at 05:54

Sajeetharan

216,225
63
350
396

thank you! another error showed up after I added `import {Component, Pipe, PipeTransform} from '@angular/core';` to `pipe.ts`: `Pipe is not defined'`. Do you know what causes this? – I Like Feb 24 '17 at 06:03
1

import { Pipe } from '@angular/core'; it should work, try changing your pipe ts to someother name – Sajeetharan Feb 24 '17 at 06:12

app.module.ts can't find name of pipe

1 Answers1