custom - Angular 2: reutilización de tuberías en varios módulos: error no encontrado o definición duplicada

pipe angular date

Question

Estoy trabajando en la versión final angular 2.

He declarado dos módulos : la aplicación principal y uno para la página de configuración .

El módulo principal está declarando globalmente tuberías. Este módulo también incluye el módulo de configuración .

app.module.ts

@NgModule({
imports: [BrowserModule, HttpModule, routing, FormsModule, SettingsModule],
declarations: [AppComponent, JsonStringifyPipe],
bootstrap: [AppComponent]
})
export class AppModule { }

settings.module.ts

@NgModule({
imports: [CommonModule, HttpModule, FormsModule, routing],
declarations: [SettingsComponent],
exports: [SettingsComponent],
providers: []
})
export class SettingsModule { }

Cuando intento utilizar la tubería en el módulo de configuración, aparece un error que indica que no se pudo encontrar la tubería.

zone.min.js?cb=bdf3d3f:1 Unhandled Promise rejection: Template parse errors:
The pipe ''jsonStringify'' could not be found (" <td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>[ERROR ->]{{user | jsonStringify}}</td>
<td>{{ user.registered }}</td>
</tr"): ManageSettingsComponent@44:24 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse 

Si incluyo el tubo en el módulo de configuración, se queja de que los dos módulos tienen el mismo tubo.

zone.min.js?cb=bdf3d3f:1 Error: Error: Type JsonStringifyPipe is part of the declarations of 2 modules: SettingsModule and AppModule! Please consider moving JsonStringifyPipe to a higher module that imports SettingsModule and AppModule. You can also create a new NgModule that exports and includes JsonStringifyPipe then import that NgModule in SettingsModule and AppModule.

json-stringify.pipe.ts

@Pipe({name: ''jsonStringify''})
export class JsonStringifyPipe implements PipeTransform {
transform(object) {
// Return object as a string
return JSON.stringify(object);
}
}

¿Alguna idea sobre esto?

Answer 1

Si desea utilizar la canalización en un módulo diferente, agregue el módulo donde se declara que la tubería se imports: [...] del módulo donde desea reutilizar la tubería, en lugar de agregarla a las declarations: [] de multiples modulos.

Por ejemplo:

@NgModule({
imports: [],
declarations: [JsonStringifyPipe],
exports: [JsonStringifyPipe]
})
export class JsonStringifyModule { }

@NgModule({
imports: [
BrowserModule, HttpModule, routing, FormsModule, SettingsModule,
JsonStringifyModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
imports: [
CommonModule, HttpModule, FormsModule, routing,
JsonStringifyModule],
declarations: [SettingsComponent],
exports: [SettingsComponent],
providers: []
})
export class SettingsModule { }