1

I am using a pipe to sanitize trusted resourceurls in an ionic 4 app

safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(url: string) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

app.module.ts

import { SafePipe } from './services/safe.pipe';<---------

@NgModule({
  declarations: [AppComponent, SafePipe],<----------
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule, 
    HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    SafePipe <----------
    { ...

my.page.html

... [data]="urlData | safe" ...

Console error... Error:The pipe 'safe' could not be found!

I followed a tutorial on this and added SafePipe to providers after googling, what is it that am I missing here?? Thanks

Ali Bigdeli
  • 1,286
  • 3
  • 17
  • 35
Ray Andison
  • 276
  • 1
  • 10

1 Answers1

0

A pipe doesn't have to be added to the providers. Just make sure you use the SafePipe in a component that is declared in the same module or the component's module should import a module where the SafePipe is declared and exported.

I can see you declared the SafePipe in AppModule and used it inside MyPageComponent.

You need to make a SharedModule and declare and export the SafePipe in this ShareModule. You import this SharedModule in a module where you want to use this pipe.

Add more components or pipes that can be used across the application.

Here is a stackblitz demo for showing how to use the SharedModule:

https://stackblitz.com/edit/shared-pipe

critrange
  • 5,652
  • 2
  • 16
  • 47
  • Is there not a way to declare such a simple pipe from app.module and have it available for reference 'globally' throughout the app? Seems quite convolute to have a pipe that is declared in a sharedmodule component that is declared in each page of the app..just to sanitize a resource url? Any code examples for reference thanks ;) – Ray Andison Aug 15 '20 at 03:24
  • Also, you mention the need to make a SharedModule that declares and exports SafePipe..isn't the safe.pipe.ts component basically this component as it is where it is declared and exported, and I am trying to import it in app.module to be used anywhere in the app? If anyone can show me in code a brief example of the correct way to set up this pipe would be appreciated.. thanks yash – Ray Andison Aug 15 '20 at 08:08
  • 1
    there is no way to declare the pipe as globally. That's why you define SharedModule and import it in a module when you want to use a shared component or pipe or else. – critrange Aug 15 '20 at 11:20
  • added stackblitz demo – critrange Aug 15 '20 at 11:21
  • I am using this pipe to sanitize a string that contians a url to display an svg image, having implemented your pipe through a shared method the image now displays as the image is sanitised, however this runs on a ngfor loop, and the app grinds to a halt, attempts to restart multiple times and locks up when I add the pipe.. surely there is an easy way to sanitize a simple url to display a resource url in ionic 4? – Ray Andison Aug 16 '20 at 08:56
  • Thanks yash, your pipe implementation is working, it is the sanitizer throwing errors now... SafeResourceUrlImpl {changingThisBreaksApplicationSecurity: "../../assets/a.svg"..for some reason the resource sanitizer is not accepting urls? need to find out the correct way to write up the url to push into the pipe now? – Ray Andison Aug 16 '20 at 09:29
  • 1
    Hi @RayAndison, good to know that it worked. not sure how the `DomSantitizer` works but I could check it. You can post another question about it as I am not familiar with `DomSantitizer` so not sure if I can help but I will check it definitely – critrange Aug 16 '20 at 09:33
  • 1
    Thanks again, posted sanitizer error here https://stackoverflow.com/questions/63435772/ – Ray Andison Aug 16 '20 at 10:31