Unexpected pipe 'EscapeHtmlPipe in escape-html.pipe.ts Please add a @NgModule annotation

Question

Running ng build --prod gives me the following error.

ERROR in : Unexpected pipe 'EscapeHtmlPipe in escape-html.pipe.ts' imported by the module 'AppModule in app.module.ts'. Please add a @NgModule annotation.

Works fine on ng serve. Problem with ng build --prod only

The code in file is given below

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import{ EscapeHtmlPipe } from '../../Shared/pipes/escape-html.pipe';

@NgModule({
  imports: [CommonModule],
  declarations: [EscapeHtmlPipe],
  exports: [EscapeHtmlPipe]
})
export class EscapeHtmlModule { }

The code file for pipe is given below

import { Pipe, PipeTransform } from '@angular/core';
import { SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'escapeHtml'
})
export class EscapeHtmlPipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) { }

  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}`);
    }
  }

}

in AppModule I have done this

import { EscapeHtmlModule } from './Module/escape-html/escape-html.module';

the NgModule part is given below

NgModule({
  declarations: [
    AppComponent,
    // EscapeHtmlPipe,
    NavMenuComponent,
    OpportunityComponent,
    HomeComponent,
    FileUploadComponent,
    TinymceComponent,
    SummaryComponent,
    OpportunityListComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    DragDropModule,
    ScrollDispatchModule,
    EditorModule,
    // EscapeHtmlPipe,

    DragulaModule.forRoot(), 
    ContextMenuModule.forRoot(), EscapeHtmlModule
  ],
  providers: [
    RFPDocumentService,
    ColorChangeService,
    CategoryService,
    InsertCategoryAttributeService
  ],
  bootstrap: [AppComponent],
  entryComponents:[TinymceComponent,OpportunityListComponent]
})

But the problem was even exist before I added EscapeHtmlModule in the middle ware as earlier I was adding the pipe directly in AppModule and that was generating the error. Any help would be appreciated Thanks

Answer 1

Your error message: ERROR in : Unexpected pipe 'EscapeHtmlPipe in escape-html.pipe.ts' imported by the module 'AppModule in app.module.ts'. Please add a @NgModule annotation says that you are importing the EscapeHtmlPipe directly into the AppModule. You need to be importing the EscapeHtmlModule into your AppModule not the EscapeHtmlPipe.

Here is a basic example of the flow when creating shared Modules with shared Pipes (or Components and Directives):

1. Create a new NgModule (which you have called EscapeHtmlModule)
2. Create the Pipe and add it to the EscapeHtmlModule's declarations and exports arrays
3. Add whichever other Modules that your pipe needs to work to the imports array
4. Go to your AppModule and import the EscapeHtmlModule (add it to the imports array)