CODEWITHSUNDEEP
angularpipe
Jojo
Jojo

Reputation: 133

Uncaught (in promise): Error: Template parse errors: The pipe 'keys' could not be found

This is my first post, so I apologise if I am not following some rules. The title of this post probably rings a bell as I've looked in all results around it but could not find the root cause of my problem.

I have a modal that opens to display a form in which I have a select that will list options from an enum. I am applying a pipe to this enum to make the object an array.

But I am getting the pipe 'keys' not found issue.

I highly appreciate your help!

So my app.module.ts

import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { WaitingTime, YearsAgo, SortBy, KeysPipe} from '../pipes/mypipe';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    WaitingTime,
    YearsAgo,
    SortBy,
    KeysPipe //declaring my pipe here
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    MyDateListService    
  ]
})
export class AppModule {}

then my HomePage home.ts (will spare some unnecessary lines). This is from where the modal will open.

import { Component } from '@angular/core';
import { NavController, ModalController, AlertController, ItemSliding} from 
'ionic-angular';
import {DateFormPage} from '../date-form/date-form'
import {WaitingTime, YearsAgo} from '../../pipes/mypipe';
import {MyDates } from '../../models/my-dates';
import {MyDateListService} from '../../services/date-list'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {}

the modal page that opens date-form.ts in which I need the pipe to function

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-
angular';
import {NgForm, FormBuilder, FormControl, FormGroup, Validators} from 
'@angular/forms'
import { MyDateListService } from '../../services/date-list';
import {KeysPipe} from '../../pipes/mypipe'; //here is the pipe
import {DateTypes} from '../../models/enums';

@IonicPage()
@Component({
  selector: 'page-date-form',
  templateUrl: 'date-form.html'
})

export class DateFormPage implements OnInit {}

and finally my pipe mypipe.ts

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

//declaring all my pipes
@Pipe ({
    name:'waitingTime'
})

export class WaitingTime implements PipeTransform
{   }
[.... all the other pipes]

// and this is the pipe that is not found.
@Pipe ({ 
    name: 'keys', 
    pure: false 
})

export class KeysPipe implements PipeTransform {

    transform(value: any, args: any[] = null): any {
        return Object.keys(value).map(key => value[key]);
    }
}

Upvotes: 0

Views: 2738

Answers (1)

Jojo
Jojo

Reputation: 133

OK, I finally found my mistake, probably because still a bit of a rookie and did not notice the pages created automatically by ionic.

I was trying to get @NgModule in my date-form.ts when I already had a date-form.module.ts where my module is defined. So declaring my pipe there, and removing its declaration from the other module app.module.ts made it work.

Thanks to all your comments, they they guided me to understand the source of my issue.

Upvotes: 1

Related Questions