Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.0k views
in Technique[技术] by (71.8m points)

angular11 - 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??


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...