NullInjectorError: No provider for DecimalPipe

13
votes

I have implemented lazy loading in my application. One of my services needs to include DecimalPipe.

service --> shared module --> App module

This is my structure. I've already included "CommonModule" in app.module.ts and My service also needs Decimal Pipe.

  1. Including "Decimal Pipe" in my shared module gives the below error:

Type DecimalPipe is part of the declarations of 2 modules: CommonModule and SharedModule! Please consider moving DecimalPipe to a higher module that imports CommonModule and SharedModule. You can also create a new NgModule that exports and includes DecimalPipe then import that NgModule in CommonModule and SharedModule.

So Since it is already part of Commons Module, why doesn't it take Decimal pipe from Commons Module. ? If It is not declared, below error is shown

NullInjectorError: No provider for DecimalPipe!

Please let me know how to handle this error. Thanks in advance!

2
angulartypescriptangular-module
Does your CommonModule export the DecimalPipe to allow other modules to access it? Can you show us an abbreviated code snippet of the modules so we can see how you are exporting/importing? – nephiw
CommonModule is from '@angular/common' – Ravi
I have declared 'CommonModule' in both imports and exports – Ravi
Were you able to solve this? – nephiw

2 Answers

15
votes

You need to provide the DecimalPipe in the Module that provides your Service

for example, if your service is "providedIn: 'root'" then you should provide the DecimalPipe in your AppModule like that:

import {DecimalPipe} from '@angular/common';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [ ],
  providers: [DecimalPipe],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}
0
votes

If you want to create a shared NgModule that you import instead of CommonModule in all of your feature modules. You would do something like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

...
@NgModule({
  imports: [CommonModule],
  declarations: [...],
  exports: [CommonModule, ...]
})
export class SharedModule {}

Then, in all of your feature modules, you would forgo importing CommonModule and instead import your SharedModule. This should give your custom code access to all of the Pipes and Components within the CommonModule.

You should not include Angular's built-in Pipes nor Components in the declarations of your NgModules as they are already declared in Angular's NgModules.

If all you are doing is trying to use the DecimalPipe in a component, importing the CommonModule in the NgModule where you provide your service should get you access to the pipe.