模块'HomieModule'导入的意外管道'ValuesPipe'

使用此设置导入管道时遇到问题:我有一个dashboard.Module,通过Dashboard-routing.Module连接Homie.Module和Services.Module

这是我的Dashboard.Module

import { DashboardRoutingModule } from './dashboard-routing.module';    
import { ValuesPipe } from './values-pipe.pipe';

@NgModule({
  imports:      [ DashboardRoutingModule, CommonModule],
  providers:    [ HomieService, ServiceService ],
  declarations: [ DashboardComponent, ValuesPipe],
  exports: [ValuesPipe],
  bootstrap:    [ DashboardComponent ]
})
export class DashboardModule { }

Homie.Module

import { ValuesPipe } from './../values-pipe.pipe';

@NgModule({
  imports: [
    CommonModule,
    HomieRoutingModule,
    FormsModule,
    Ng2SearchPipeModule,
    ValuesPipe
  ],
  declarations: [HomieListComponent, HomieDetailComponent]
})
export class HomieModule { }

Service.Module

import { ValuesPipe } from './../values-pipe.pipe';

@NgModule({
  imports: [
    CommonModule,
    ServiceRoutingModule,
    FormsModule,
    Ng2SearchPipeModule,
    ValuesPipe
  ],
  declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule { }

错误

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Unexpected pipe 'ValuesPipe' imported by the module 'HomieModule'. Please add a @NgModule annotation.
Error: Unexpected pipe 'ValuesPipe' imported by the module 'HomieModule'. Please add a @NgModule annotation.

当我在Homie和Service模块中声明我的管道时,我收到错误消息:在两个模块中声明管道.这就是为什么我将我的管道移动到Dashboard.module,这是与两者(父)连接的模块.

按设计惯例实施设计是错误的.如果要共享项目模块通用的管道,组件,指令,则应使用SharedModule概念.

在您的解决方案中,您正在正确地导出管道,但就这样它不起作用.

一旦你common pipe(s), component(s) and directive(s)这样做出口,你必须import that entire module from where you have exported such things to other modules where you want to use them.所以关注,

1)在项目目录的某处创建一个共享模块

import { NgModule }            from '@angular/core';
import { CommonModule }        from '@angular/common';

import { ValuesPipe}         from './../values-pipe.pipe';

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

2)导入shareModule inService.Module

import { SharedModule } from '../shared/shared.module';
...
...

@NgModule({
  imports: [
    CommonModule,
    ...
    SharedModule
  ],
  declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule { }

现在您已准备好使用导出的管道Service Module.

阅读有关shareModule的更多信息