NullInjectorError: No provider for DecimalPipe

angular typescript angular-module
Ravi picture Ravi · Oct 7, 2019 · Viewed 7.1k times · Source

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!

Answer

uriel shtainfeld picture uriel shtainfeld · Apr 23, 2020

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 {
}

Related questions

Use component from another module

I have Angular 2.0.0 app generated with angular-cli. When I create a component and add it to AppModule's declarations array it's all good, it works. I decided to separate the components, so I created a TaskModule and a component TaskCard. Now …

Read More
Angular 2 'component' is not a known element

I'm trying to use a component I created inside the AppModule in other modules. I get the following error though: "Uncaught (in promise): Error: Template parse errors: 'contacts-box' is not a known element: If 'contacts-box' is an Angular component, then …

Read More
How to declare a pipe globally to use in different modules?

I have a custom pipe named CurrConvertPipe import {Pipe, PipeTransform} from '@angular/core'; import {LocalStorageService} from './local-storage'; @Pipe({name: 'currConvert', pure: false}) export class CurrConvertPipe implements PipeTransform { constructor(private currencyStorage: LocalStorageService) {} transform(value: number): number { let inputRate = this.…

Read More