Pipe could not be found: Angular 5 custom pipe
You need to add it under SharedModule
exports as well,
exports: [
SafePipe
]
Steve
Updated on June 07, 2022Comments
-
Steve almost 2 years
I have read this post and this article. I believe I have done everything suggested: added the pipe to a module which is shared.
However, no matter what I do I cannot get my template to find the pipe I created. My app already has a Shared Module which the other modules import, so I create the pipe and added it to the shared module:
I created it with
ng g pipe /shared/pipes/safe --flat --module shared --spec=false
In SharedModule, I also added it to
declarations
andproviders
.Everything runs, but it I try to use the pipe, as in:
<iframe width="600" height="360" [src]="video.acf.youtube_url | safe: 'url'" frameborder="0" allowfullscreen></iframe>
I just get an error
Error: Uncaught (in promise): Error: Template parse errors: The pipe 'safe' could not be found
The pipe itself is
import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser'; @Pipe({ name: 'safe' }) export class SafePipe implements PipeTransform { constructor(protected sanitizer: DomSanitizer) { } public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl { switch (type) { case 'html': return this.sanitizer.bypassSecurityTrustHtml(value); case 'style': return this.sanitizer.bypassSecurityTrustStyle(value); case 'script': return this.sanitizer.bypassSecurityTrustScript(value); case 'url': return this.sanitizer.bypassSecurityTrustUrl(value); case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value); default: throw new Error(`Invalid safe type specified: ${type}`); } } }