Angular 'unexpected pipe imported by module' error
You should add the pipe under declarations
not under import
@NgModule({
imports: [
CommonModule,
FormsModule,
HttpModule
],
declarations: [
LoginComponent,
ErrorComponent,
MyCustomPipe,
DecimalPipe
],
exports: [
CommonModule,
HttpModule,
LoginComponent,
ErrorComponent,
DecimalPipe,
MyCustomPipe
]
})
You don't have to worry about importing/declaring the inbuilt DecimalPipe along with your customPipe that uses it when you use/reuse it elsewhere in your app. Just declare the customPipe only. In your custom pipe's definition, just import
the DecimalPipe
like
import { DecimalPipe } from '@angular/common';
Then in the feature module that uses it just define them as part of the declarations
array in @NgModule
. If importing this feature module elsewhere in other feature module is supposed to identify this particular pipe being used in that new feature module, then mention this customPipe also part of the exports
array declaration of the earlier feature module (that is being reused).
@NgModule({
imports: [
CommonModule,
...
],
declarations: [
CustomPipe
],
exports: [
CustomPipe // <-- do this only if you need this pipe to be available external to this ReusedFeatureModule when this module is 'imported' to other feature modules
]
})
export class ReusedFeatureModule { }
CustomPipe
import { Pipe, PipeTransform } from '@angular/core';
import { DecimalPipe } from '@angular/common';
@Pipe({
name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
...
private originalDecimalPipe: DecimalPipe; // this variable will have the inbuilt DecimalPipe inside the constructor body
constructor () {
this.originalDecimalPipe = new DecimalPipe('en-US'); // pass the current locale as the argument
}
transform(value: any): any { return <transformed-value>;} // implement your transform
}