Pipe not found - Angular 5

Asked

Viewed 574 times

2

I’m having a problem creating a custom Pipe.

I created the following module (Pipes.modulets.):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CnpjPipe } from './cnpj.pipe';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations:   
    [
        CnpjPipe
    ],
    exports:
    [
        CnpjPipe
    ],
})
export class PipesModule { 
    static forRoot() {
        return {
            ngModule: PipesModule,
            providers: [],
        };
    }
}

This is my Pipe that was created: 

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

@Pipe({
  name: 'cnpj'
})
export class CnpjPipe implements PipeTransform {
    transform(value: any, args?: any): any {
        return `${value.substr(0, 2)}.${value.substr(2, 3)}.${value.substr(5, 3)}/${value.substr(8, 4)}-${value.substr(12, 2)}`;
    }
}

I imported this module into my app.module.ts:

import { PipesModule } from './pipes/pipes.module';

declarations: [
        ...
    ],
    imports: [
        ...,
        PipesModule.forRoot()
    ],

When it comes to using PIPE in this way:

<div class="col-md-2 text-left">
    {{ objUsuario.cnpj | cnpj }}
</div>

From the following error:

**

The pipe 'cnpj' could not be found

**

angular

  • This may sound stupid, but you’re already trying to change the order of the Imports array? To me it happens a few times that X import is not well done and I pass it to a few Indexes before and import works :|

1 answer

1


I solved the problem, it happened that I was using Pipe inside a component inside a Shared module.

And my Pipe module was being called in a single application module.

Thus, the component within the Shared module could not find the Pipe that was imported within a single module.

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.