Search code examples
javascriptangulartypescriptangular-pipe

NullInjectorError: No provider for SlicePipe


I have created custom pipe which is using another build-in pipe Here is example :

import { Pipe, PipeTransform } from '@angular/core';
import { SlicePipe } from '@angular/common';
import { isNumeric } from 'rxjs/util/isNumeric';

@Pipe({ name: 'range' })
export class RangePipe implements PipeTransform {
    constructor(private slicePipe: SlicePipe) { }

    transform(data: any, page: number, size: number): any {
        if (Array.isArray(data) && isNumeric(page) && isNumeric(size)) {
            const start_index = (page - 1) * size;
            if (data.length < start_index) {
                return [];
            } else {
                return this.slicePipe.transform(data.slice(start_index), size);
            }
        } else {
            return data;
        }
    }
}

Also have added my custom pipe to app.module

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    routing
],
declarations: [
    AppComponent,
    ...
    RangePipe
],
providers: [],
bootstrap: [AppComponent]
})

But get error

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[RangePipe -> SlicePipe]: StaticInjectorError(Platform: core)[RangePipe -> SlicePipe]: NullInjectorError: No provider for SlicePipe!

Where is my problem? Do I forget to register something?


Solution

  • Suppose you need to use custom class in angular DI.

    import {FactoryProvider} from "@angular/core";
    import {SlicePipe} from "@angular/common";
    
    class AwesomePipe{
      constructor(private slicePipe: SlicePipe){
    
      }
    }
    

    and it depends on some other classes

    class AwesomeClassProvider implements FactoryProvider{ 
      provide: AwesomePipe;
      useFactory(pipe: SlicePipe) {
        return new AwesomePipe(pipe);  
      }
      deps: [SlicePipe]
    }