Import Pipe in IONIC

Question

I created a value.pipe.ts file in pages. and imported it in app.module like:

import { SanitizeHtmlPipe } from '../pages/value.pipe';
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SanitizeHtmlPipe
  ],
  imports: [
    BrowserModule,
    IonicStorageModule.forRoot(),
    HttpModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    {provide: ErrorHandler,useClass: IonicErrorHandler},
    IonicStorageModule,Auth,
    ApiServiceProvider,
  ]
})
export class AppModule {}

My pipe file is:

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

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

  transform(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

But now when i run my code i am getting error as:

Error: Unexpected value 'undefined' declared by the module 'AppModule' at syntaxError (http://localhost:8100/build/vendor.js:80856:34) at http://localhost:8100/build/vendor.js:95510:40 at Array.forEach () at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:95508:54) at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:113874:87) at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:113835:36) at JitCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:113751:37) at CompilerImpl.compileModuleAsync (http://localhost:8100/build/vendor.js:79692:49) at PlatformRef.bootstrapModule (http://localhost:8100/build/vendor.js:5796:25) at Object.229 (http://localhost:8100/build/main.js:1689:109)

What am i doing wrong here?

@Sajeetharan. Imported this in ap.module.. which means i can use it every module i hope — user8231819

Sajeetharan Sajeetharan · Accepted Answer · 2018-01-28T15:13:54

I would suggest you to add a sharedModule to have all your commonly used pipes and providers

Shared.Module.ts

@NgModule({
  imports: [
    // dep modules
  ],
  declarations: [ 
    SanitizeHtmlPipe
  ],
  exports: [
    SanitizeHtmlPipe
  ]
})
export class SharedModule {}

and use it in your app.module.ts , as suraj mentioned remove IonicStorageModule from providers since it should be imported under modules.

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    SharedModule,
    IonicStorageModule.forRoot(),
    HttpModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    {provide: ErrorHandler,useClass: IonicErrorHandler},
    Auth,
    ApiServiceProvider,
  ]
})
export class AppModule {}

Import Pipe in IONIC

1 Answers