RROR Error: Uncaught (in promise): Error: Unexpected pipe 'SafePipe' imported by the module

I have created a modal page that show the detil data. I want to remove htm tag using safe htm pipe from inner html

module

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BrsdetilPage } from './brsdetil';
import { SafePipe } from '../../pipes/safe-html/safe-html';

@NgModule({
  declarations: [
    BrsdetilPage
  ],
  imports: [
    IonicPageModule.forChild(BrsdetilPage),
    SafePipe
  ],
  exports : [ SafePipe ]
})
export class BrsdetilPageModule {}

html

  <ion-row>
      <ion-col>
        <p style="font-size: 1.6rem;font-weight: bold;"><ion-icon name="exit"></ion-icon>&nbsp;&nbsp;Abstrak</p>
        <p style="text-align: justify;font-size: 1.5rem;">{{allPublication1.abstract}}</p>
        <div style="text-align: justify;" [innerHTML]="allPublication1.abstract|safe"></div>
      </ion-col>
  </ion-row>
  </ion-grid>

</ion-content>

ts

import { Component } from '@angular/core';
import { NavController, IonicPage, ViewController, NavParams, LoadingController } from 'ionic-angular';
import { BRS } from '../../providers/brs';

/**
 * Generated class for the BrsdetilPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-brsdetil',
  templateUrl: 'brsdetil.html',
})
export class BrsdetilPage {

  allPublication1:any =[];
  tanggal:string;
  bulan:string;
  tahun:string;  
  //listDomain1:any =[];
  //listDomain1:any[]=[];
  constructor(public navCtrl: NavController,  public navParams: NavParams, 
    public viewCtrl:ViewController, public publicationList1: BRS, public loadingController:LoadingController) {
  }

  ionViewDidLoad() {
	let allPublicationLoadingController = this.loadingController.create({
		content: `<div class="custom-spinner-container">
					<div class="custom-spinner-box"></div>
				</div>`,
		spinner: 'crescent',
		cssClass: 'transparent',
		duration: 3000
	});	  
	allPublicationLoadingController.present();
		  this.publicationList1.getDetilBRS(this.navParams.get('brs_id'))
		.subscribe((publicationListData1:any) => {
		  this.allPublication1= publicationListData1.data;
		  allPublicationLoadingController.dismiss();
		  })    
	  console.log('ionViewDidLoad PubDetilPage');
	  console.log('Data : '+this.allPublication1);
  }
  
  goToLink(url: string){
    window.open(url, "_blank");
  }

  dismiss() {
    this.viewCtrl.dismiss();
  }

}

pipe

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(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

display

a1599×783 131 KB

in main app module i success to implement it, but in custom page modul, i failed

please help, thanks

1 post - 1 participant

Read full topic