How can I properly import a Pipe Module in my Component in Angular 4/Ionic?

So I am getting this error:

Template parse errors: The pipe 'orderByDateSubmitted' could not be found.


Any my code looks like this:

First, I created a Pipe:

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

@Pipe({
name: 'orderByDateSubmitted'
})

export class OrderByDateSubmittedPipe implements PipeTransform {

transform(array: Array<any>, args: string): Array<any> {
//sort code
}
}


and then I created a Module for this:

import { NgModule } from '@angular/core';
import { CommonModule } from "@angular/common";
import { OrderByDateSubmittedPipe } from './order-by-date-submitted';

@NgModule({
imports: [CommonModule],
declarations: [OrderByDateSubmittedPipe],
exports: [OrderByDateSubmittedPipe],
})

export class OrderByDateSubmittedPipeModule {}


And in my App Module

import { OrderByDateSubmittedPipe } from './../pipes/order-by-date-submitted/order-by-date-submitted';
import { OrderByDateSubmittedPipeModule } from './../pipes/order-by-date-submitted/order-by-date-submitted.module';

@NgModule({
declarations: [MyApp...],
imports: [...
OrderByDateSubmittedPipeModule
],
bootstrap: [IonicApp],
entryComponents: [...],
providers: [...]
})
export class AppModule {}


and I use it in one of my components like this:

*ngFor="let r of reports | orderByDateSubmitted: '-date_submitted'"


But I'm getting that error. Did I actually do the importing of modules correctly? Or am I missing something?

Continue reading...