时间戳

首页 > 解决方案 > 意外管道'EscapeHtmlPipe 在escape-html.pipe.ts 请添加@NgModule 注释

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

问题描述

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

错误：由模块“appModule in app.module.ts”导入的意外管道“escape-html.pipe.ts 中的 EscapeHtmlPipe”。请添加 @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 中添加了管道，这会产生错误。任何帮助将不胜感激谢谢

标签： angularbuildangular7angular-pipe

解决方案

您的错误消息：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到您的AppModulenot 中EscapeHtmlPipe。

Pipes以下是使用 shared （或Componentsand ）创建共享模块时的基本流程示例Directives：

  1. 创建一个新的NgModule（你称之为 EscapeHtmlModule）
  2. 创建Pipe并将其添加到 EscapeHtmlModuledeclarations和exports数组
  3. 将管道需要工作的任何其他模块添加到imports数组
  4. 转到您的AppModule并导入EscapeHtmlModule（将其添加到imports数组中）

推荐阅读