意外的管道'EscapeHtmlPipe in escape-html.pipe.ts 请添加@NgModule 注释

Question

运行 ng build --prod 给我以下错误。

错误：模块 'AppModule in app.module.ts' 导入了意外的管道 'EscapeHtmlPipe in escape-html.pipe.ts'。请添加@NgModule 注解。

在 ng serve 上工作正常。仅 ng build --prod 有问题

文件中的代码如下

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 { }

管道的代码文件如下

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

}

我在 AppModule 中做到了这一点

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

下面给出了 NgModule 部分

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]
})

但问题甚至在我在中间件中添加 EscapeHtmlModule 之前就已经存在，因为我之前直接在 AppModule 中添加管道并且产生了错误。任何帮助，将不胜感激谢谢

Answer 1

您的错误消息：ERROR in : Unexpected pipe 'EscapeHtmlPipe in escape-html.pipe.ts' imported by the module 'AppModule in app.module.ts'. Please add a @NgModule annotation 表明您正在将 EscapeHtmlPipe 直接导入 AppModule。您需要将 EscapeHtmlModule 导入 AppModule 而不是 EscapeHtmlPipe.

这是使用共享 Pipes（或 Components 和 Directives）创建共享模块时的基本流程示例：

创建一个新的 NgModule（您已将其称为 EscapeHtmlModule）
创建 Pipe 并将其添加到 EscapeHtmlModule 的 declarations 和 exports 数组
将您的管道需要工作的任何其他模块添加到 imports 数组
转到您的 AppModule 并导入 EscapeHtmlModule（将其添加到 imports 数组）

意外的管道'EscapeHtmlPipe in escape-html.pipe.ts 请添加@NgModule 注释

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

build

angular-pipe

angular

angular7