CODEWITHSUNDEEP
pipeangular11
Kasoir Abbas
Kasoir Abbas

Reputation: 51

How to resolve error pipe could not be found in angular 11

I'm not using pipes for the first time, but now I'm trying to use safe pipe which I created in a separated folder "pipes" with PipesModule as below
this is the pipe class:

safe.pipe.ts

    import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl } from '@angular/platform-browser';
    
    @Pipe( {
        name: 'safe'
    } )
    export class SafePipe implements PipeTransform {
    
        constructor ( protected sanitizer: DomSanitizer ) { }
    
        public transform ( url: any ) {
            return this.sanitizer.bypassSecurityTrustResourceUrl( url );
        }
    }

and this is the module file pipes.module.ts

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { SafePipe } from './safe.pipe';
    
    
    
    @NgModule( {
        declarations: [
            SafePipe
        ],
        exports: [
            SafePipe
        ],
        imports: [
            CommonModule
        ]
    } )
    export class PipesModule { }

and I imported the PipesModule in the component module that I want to use pipe in,

    @NgModule( {
        declarations: [ GenerateContractComponent ],
        imports: [
            CommonModule,
            FormsModule,
            NgxMaskModule,
            PipesModule
        ]
    } )

Then used pipe in HTML as this:

    <iframe width="100%" style="height:-webkit-fill-available" [src]="pdfURL | safe" frameborder="0"></iframe>

but still get the error

Error: Uncaught (in promise): Error: NG0302: The pipe 'safe' could not be found! Please can anyone help??

Upvotes: 2

Views: 4950

Answers (1)

Owen Kelvin
Owen Kelvin

Reputation: 15083

I have similar problem and my solution was to simply restart the server.

If the above does not work, close the IDE and restart the project. It may be an issue with cached files

If this doesn't work also clear browser cache and reload you app

From the below Demo on Stackblitz Your approach is correct and should work

Upvotes: 5

Related Questions