Unhandled Promise rejection: Template parse errors: The pipe 'orderBy' could not be found

Question

This is my first angular 2 project and I have created a pipe transform to to sort data in my table. The project gets compiled successfully. But while running browser throws error that it could not find pipe that was created. Please excuse me if this appears so basic

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

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

  transform(records: Array<any>, args?: any): any {

    return records.sort(function(a, b){
      if(a[args.property] < b[args.property]){
        return -1 * args.direction;
      }
      else if( a[args.property] > b[args.property]){
        return 1 * args.direction;
      }
      else{
        return 0;
      }
    });
  };

}

the same is entered in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { HttpModule } from '@angular/http';
import {AppComponent} from './app.component';
import {ReturnsJsonArrayService} from "./components/display-data/display-json-data.service";
import {DisplayCustomerDataComponent} from "./components/display-data/display-json-data.component";
import {Ng2PaginationModule} from 'ng2-pagination';

import { HomeComponent } from './components/home/home.component';
import { LenderComponent } from './components/lender/lender.component';
import { PoolComponent } from './components/pool/pool.component';


import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
import {AppRoutingModule} from "./app-routing.module";
import { UserLoginComponent } from './components/user-login/user-login.component';
import { FormValidationComponent } from './components/form-validation/form-validation.component';
import { SearchFilterPipe } from './components/search-filter.pipe';
import {OrderByPipe} from "./components/funding-request/orderBy.pipe";




@NgModule({
  declarations: [
    AppComponent,DisplayCustomerDataComponent, HomeComponent,
    LenderComponent, PoolComponent, 
     PageNotFoundComponent,
    UserLoginComponent, FormValidationComponent, SearchFilterPipe, OrderByPipe
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    Ng2PaginationModule,


  ],
  providers: [ReturnsJsonArrayService,SearchFilterPipe,OrderByPipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

in my html I have entered it as following

<tr *ngFor="let x of selectedData | orderBy: {property: column, direction: direction}" >

The component being used is

import { Component } from '@angular/core';



@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.css']
})
export class CategoryComponent  {
  records: Array<any>;
  isDesc: boolean = false;
  column: string = 'CategoryName';
  direction: number;

  constructor() { }

  sort(property){
    this.isDesc = !this.isDesc;
    this.column = property;
    this.direction = this.isDesc ? 1 : -1;
  };

}

When the page loads on browser, it throws following error

zone.js:522 Unhandled Promise rejection: Template parse errors:
The pipe 'orderBy' could not be found ("
        </tr>
        <!--LOOP TO DISPLAY DATA-->
          <tr *ngFor="l[ERROR ->]et x of selectedData | orderBy: {property: column, direction: direction}" >
            <td>
        "): FundingRequestComponent@192:23 ; Zone: <root> ; Task: Promise.then ; Value: 
SyntaxError {__zone_symbol__error: Error: Template parse errors: The pipe 'orderBy' could not be found (" </tr> <!--LOO……}
 Error: Template parse errors:
The pipe 'orderBy' could not be found ("
        </tr>
        <!--LOOP TO DISPLAY DATA-->
          <tr *ngFor="l[ERROR ->]et x of selectedData | orderBy: {property: column, direction: direction}" >
            <td>